畫布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： 畫布顯示層