Question

所以我想要实现的是绘制一个带有color / fillRect或clearRect的矩形，然后将其复制到我正在绘制的那个下面的另一个画布层。另外，我想用不透明度设置这个图层的背景。

我尝试过用fillStyle和fillRect设置背景，它很好。此外，我可以在没有背景的上部画布上绘制带有fillRect的矩形，然后使用drawImage将矩形复制到另一个矩形。

当我尝试使用clearRect创建一个矩形并复制它时出现问题。我注意到我只能用另一个矩形清除。但后来我必须设置上部画布的背景，这是好的，但是当我将它复制到另一个时，它每次都会变得更暗更暗（当然......）

那怎么可能呢？

Answer 1

当您使用Alpha通道时，您会注意到只要alpha < 255累积Alpha通道值。 “重置”这一点的唯一方法就是重新开始说话。

以下是一些解决此问题的方法 -

选项1

不要将草稿画布中的任何内容复制到主画布，而是将所有点和形状存储到二维数组或由形状对象及其点，颜色，线宽等组成的数组中。

当您需要更新主画布时，请清除两个画布，然后将所有形状重新渲染为主画布。

选项2

如果主画布上的所有形状都假设具有相同的不透明度，则使用第三个离屏画布。将所有内容绘制到此画布非透明（最后这一点非常重要）。

当更新主画布清除它时，在其上设置globalAlpha，然后将离屏画布绘制到它。

Answer 2

所以我们可能需要一些示例代码，因为我不是100％确定你要做什么...你使用2个画布对象，在顶部画布上绘图，然后将其复制到底部画布。类似的东西？：

 ctx2.drawImage(canvas1,0,0);

然后你清理顶部画布：

 ctx1.clearRect(0,0,canvas1.width,canvas1.height);

再次做你的抽奖程序？你试图获得某种痕迹效果吗？