删除在 HTML5 Canvas 中创建的圈子

Question

我制作了一个 canvas，我可以在其中绘制形状。当我想删除它们时，我基本上会再次创建相同的形状，但它是白色的，所以我不会删除任何其他形状（保存了 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 像素半径圆圈的边缘绘制了 "aura" 个灰色像素，使其外观平滑，并且 "aura" 比你计划画的要大一点点。

如果您随后在其上绘制一个 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 ;-)

有关抗锯齿的更多信息，请参见例如我可以在 HTML

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>

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

删除在 HTML5 Canvas 中创建的圈子

deleting a circle made in HTML5 Canvas

javascript

shapes

html5-canvas