Question

我有两个画布彼此叠加在一起：

＆＃13;

<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>

＆＃13;

但问题是当我在最顶层的画布上调用clearRect（）时，如下所示：

＆＃13;

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

＆＃13;

然后它使我最顶部的画布看起来灰色不再透明了！是不是clearRect（）应该让整个画布再次清晰透明？发生了什么事？非常感谢任何帮助！

编辑：意识到我的错误在于CSS：

＆＃13;

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

＆＃13;

使画布背景变为灰色而不是透明。

Answer 1

如this fiddle所示，clearRect成功重置了alpha。

您的问题可能还有其他来源，其中最常见的一种是在CSS中向画布添加background-color。要检查这一点，请使用您选择的devtools检查画布，并查看背景属性

clearRect（）撤消画布

1 个答案: