画布JavaScript

Question

我正在尝试使用JavaScript画布进行“隐藏的问候”。 当用户单击画布的某个区域时，该区域的不透明度会降低，这应该是通过这种方式进行的。 为了改变这种不透明度，我使用了像素数据（getImageData）。 然后，我再次在画布上写入该文本，因为如果像素数据在该区域中，它也会更改该文本。

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

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

请参阅CodePen上 situ25（ @ situ25 ）的Pen JBdJzZ 。

当在画布上单击时，将调用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) 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);
}

像在示例中所做的那样，将鼠标悬停在图像上时会显示出一部分前景。

有关完整的工作示例，请参见Pen： 画布显示层