clearRect生成白色框（不删除设置颜色）

Question

我在画布中有多个叠加的上下文（每个都会显示圆圈，然后删除圆圈，在上下文的新位置创建新圆圈）。我用这段代码测试了可行性：

var radius = 10;
cx2 = document.getElementById("myCanvasID").getContext('2d');
cx2.beginPath();
cx2.arc(150, 150, 10, 0, Math.PI*2, true);
cx2.closePath();
cx2.fillStyle = '#6495ED';
cx2.fill();
cx2.lineWidth = 2;
cx2.strokeStyle = '#003300';
cx2.stroke();

//ctx2.fillColor = "rgba(0-255, 0-255, 0-255, 0-1)"   
cx2.clearRect(0,0,300,300);
//cx2.globalCompositeOperation = "destination-out"
//cx2.fillStyle = 'rgba(0, 255, 0, 0)';
// cx2.fillRect(0, 0, 300, 300);
// cx2.globalCompositeOperation = "destination-in"


cx2.beginPath();
cx2.arc(180, 180, 10, 0, Math.PI*2, true);
cx2.closePath();
cx2.fillStyle = '#6495ED';
cx2.fill();
cx2.lineWidth = 2;
cx2.strokeStyle = '#003300';
cx2.stroke();

clearRect的问题是它留下一个白色矩形，我想让它透明，因为下面的图层有背景。

其他图层将堆叠在顶部，并且所有图层都需要透明，删除圆圈和重绘不应影响此。

我尝试过其他一些命令，但到目前为止还没有任何命令。 clearRect给了我这个白色矩形：

https://jsfiddle.net/dorien/tghgsw5g/

Answer 1

您有一个上下文：ReadonlyArray<string>返回画布的.getContext('2d')。它不会创建新的上下文。因此，当您CanvasRenderingContext2D时，您还要清除cx2.clearRect(0,0,300,300);，因为它是相同的背景。

如果你想要单独的“图层”，你需要创建单独的cx1并将它们放在彼此的顶部。