clearRect（）撤消畫布的透明度

Question

我有兩張彼此重疊的畫布，如下所示：

 <canvas id="myCanvas" style="z-index: 1; position:absolute; left:0px; top:0px; " width="720" height="480"></canvas> <canvas id="trailCanvas" style="z-index: 0; position:absolute; left:0px; top:0px; " width="720" height="480"></canvas> 

但是問題是，當我在最頂層的畫布上調用clearRect（）時，如下所示：

  ctx.clearRect(0, 0, canvas.width, canvas.height); 

然后它使我最上面的畫布看起來不再是灰色了！ clearRect（）是否應該使整個畫布再次變得清晰透明？ 這是怎么回事？ 非常感謝您的幫助！

編輯：意識到我的錯誤是在CSS中：

  <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> 

這會使畫布背景變成灰色而不是透明。

Answer 1

如該小提琴所示 ， clearRect成功重置了Alpha。

您的問題可能還有其他來源，最常見的問題之一就是在CSS中向畫布添加background-color 。 要檢查這一點，請使用您選擇的devtools檢查畫布，並查看背景屬性是什么。