Canvas javascript

Question

我正在尝试使用javascript画布制作一个"隐藏的问候语"。它应该以这种方式工作，当用户单击画布的某个区域时，该区域的不透明度会降低。为了改变这种不透明度，我使用像素数据(getImageData(。然后我在画布上再次写入该文本，因为如果文本在该区域中，像素数据也会更改文本。

我面临的问题是，当我有时在画布中单击时，文本本身就会显示出来，即使我没有在文本区域中单击。

代码和输出可以在这里找到。

请参阅CodePen上的笔JBdJzZ by situ25(@situ25(。

函数fillpos((是在画布上单击时调用的。

function fillpos(ev){
var canvas=document.getElementById("canvas1");
if(canvas.getContext)
{
var ctx=canvas.getContext('2d');
ctx.fillStyle='rgb(0,240,0)';
ctx.globalAlpha=0.2;
var pos=getMousePos(canvas,ev);
var borderWidth=parseInt(getComputedStyle(document.getElementById("canvas1")).borderWidth);
var imagedata=ctx.getImageData(pos.x,pos.y,40,40);
for(var i=0;i<imagedata.data.length;i+=4)
{
imagedata.data[i+3]=100;
}
ctx.putImageData(imagedata,pos.x,pos.y);
writeText();
}
}
function writeText(){
var canvas=document.getElementById("canvas1");
if(canvas.getContext){
var ctx=canvas.getContext('2d');
ctx.font="40px Georgia";
ctx.fillText("Hi There",100,100);                       //Write text again
}
}

Answer 1

重写文本时，取消注释fillstyle并将其设置为rgb(0, 255, 0)以重置文本填充颜色。

Answer 2

我面临的问题是，当我有时在画布中单击时，即使我没有在文本区域中单击，文本本身也会可见。

这是因为你在画布上绘制文本，而不管它的哪一部分应该显示出来，并且是在绘制背景/前景之后才这样做的，这意味着它是在其他所有东西之上最后绘制的。

对于一个画布，你只有一层图像数据，所以你不能在画布中"揭示"一些一开始就不存在的东西。

实现目标的一种方法是有一个单独的画布，它只包含前景层的图像数据(这里称为revealLayerCanvas(：

var revealLayerCanvas = document.createElement('canvas');
revealLayerCanvas.width = canvas.width;
revealLayerCanvas.height = canvas.height;
revealLayerCtx = revealLayerCanvas.getContext('2d');

绘制画布时，首先绘制背景，然后绘制文本，然后绘制前景层。

function redraw(){
ctx.fillStyle='rgb(0,240,0)';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='rgb(0,0,0)';
ctx.font="40px Georgia";
ctx.fillText("SECRET",100,100);
ctx.drawImage(revealLayerCanvas,0,0);
}

当在图像上拖动时，您将显示前景的一部分，就像您在示例中所做的那样。

请参阅钢笔完整的工作示例：Canvas Reveal Layer