删除HTML5中制作的圆圈画布[复制]

Question

这个问题在这里已有答案：

• Erasing previously drawn lines on an HTML5 canvas 5个答案

我做了一个画布，我画了形状。当我想删除它们时，我基本上再次创建相同的形状但它是白色的，所以我不删除任何其他形状（保存x和y坐标，所以没有什么可担心的）

ctx.fillStyle="#FFFFFF";
ctx.strokeStyle="#FFFFFF";

ctx.beginPath();
ctx.arc(x, y, 40, 0, 2 * Math.PI);
ctx.fill();

问题是，在某些形状上仍然存在剩余的黑色休息，我无法摆脱（在其他形状上更糟糕）

我错过了什么？

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50,50 , 40, 0, 2 * Math.PI);
ctx.fill();
        		
ctx.fillStyle="#FFFFFF";
ctx.strokeStyle="#FFFFFF";
      
ctx.beginPath();
ctx.arc(50,50 , 40, 0, 2 * Math.PI);
ctx.fill();

<canvas id="myCanvas" width="1000" height=600 style="border: 1px solid #000000;">
</canvas>

编辑：https://jsfiddle.net/sfj5y091/3/

编辑2：我最终解决了这个问题，通过在系统中删除一个形状后完全重绘所有形状，甚至可以删除重叠的形状而不破坏其他形状

Answer 1

残留物是由平滑或抗锯齿引起的。

为了在最初的白色背景上绘制黑色圆圈，在40像素半径圆的边缘绘制灰色像素的“光环”以使其具有光滑的外观，并且“光环”比稍微大一点你打算画画。

然后，如果您在其上绘制一个白色的40像素半径圆圈，它会将新的白色边缘像素与现在的非白色背景混合。结果是较浅的灰色像素，而不是白色像素。

如果您唯一的选择仍然是绘制旧像素，那么您将不得不使用稍大一点的白色圆圈：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 40, 0, 2 * Math.PI); // radius of 40
ctx.fill();

ctx.fillStyle = "#FFFFFF";
ctx.strokeStyle = "#FFFFFF";

ctx.beginPath();
ctx.arc(50, 50, 41, 0, 2 * Math.PI); // radius of 41
ctx.fill();

<canvas id="myCanvas" width="150" height="150" style="border: 1px solid #000000;">
</canvas>
<br /> Nothing to see here ;-)

有关抗锯齿的更多信息，请参阅例如Can I turn off antialiasing on an HTML <canvas> element?

Answer 2

双缓冲在行动

尝试

step1();

setTimeout(function () {

  step2();

  setTimeout(function () {

    step3();

  }, 1000);
}, 1000);

function step1() {
  clearCanvas('myCanvas1');

  drawShape('myCanvas1'
     ,{type:"circle", strokeStyle:"#000000", fillStyle:"#000000", radious:40, x:50, y:50});
};

function step2() {
  clearCanvas('myCanvas2');

  showOtherCanvas('myCanvas2', 'myCanvas1');
};

function step3() {
  clearCanvas('myCanvas1');

  drawShape('myCanvas1'
     ,{type:"circle", strokeStyle:"#000000", fillStyle:"#000000", radious:40, x:50, y:50});

  showOtherCanvas('myCanvas1', 'myCanvas2');
};

function drawCircle (canvasID, info) {
  var canvas = document.getElementById(canvasID);
  var ctx = canvas.getContext('2d');
  
  ctx.fillStyle=info.fillStyle;
  ctx.strokeStyle=info.strokeStyle;

  ctx.beginPath();
  ctx.arc(info.x, info.y, info.radious, 0, 2 * Math.PI);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(info.x, info.y, info.radious, 0, 2 * Math.PI);
  ctx.stroke();
}

function showOtherCanvas(cnv1, cnv2) {
  var c1 = document.getElementById(cnv1);
  var c2 = document.getElementById(cnv2);
  
  c1.style['z-index'] = 3;
  c2.style['z-index'] = 1;
  c1.style['z-index'] = 2;
}

function clearCanvas(canvasID) {
  var canvas = document.getElementById(canvasID);
  var ctx = canvas.getContext('2d');
  
  ctx.fillStyle="#FFFFFF";
  ctx.strokeStyle="#FFFFFF";
  
  ctx.fillRect(0,0,640,400);
} 



function drawShape (canvasID, info) {
  switch (info.type) {
    case  "circle" : drawCircle(canvasID, info);
  }
}

<canvas id="myCanvas2" width="640" height="400"
	style="border: 1px solid #000000; position: absolute; top: 10; left: 10; z-index:1">
</canvas>
<canvas id="myCanvas1" width="640" height="400"
	style="border: 1px solid #000000; position: absolute; top: 10; left: 10; z-index:2">
</canvas>

变化如此之快，你不会看到任何闪烁。