HTML5 canvas 上下文未使用 clearRect() 清除

Question

我有两个 canvases：一个缓冲区和一个显示器 canvas，其上下文通过缓冲区 canvas 调用 drawImage()。我在添加新对象和调用 drawImage() 之前都清除了 canvases，但都显示了所有先前添加的对象。这是对象添加代码（查看下面的完整 JSFiddle）：

ctx.clearRect(0, 0, 500, 500);
buf.clearRect(0, 0, 500, 500);
img.src = bufCanvas.toDataURL();
buf.fillStyle = 'hsl(' + ~~(Math.random()*360) + ', 100%, 70%)';
buf.rect(Math.random()*w, Math.random()*h, 20, 20);
buf.fill();
ctx.drawImage(bufCanvas, 0, 0);

JSFiddle：http://jsfiddle.net/3movoayv/10/

上面是buffer（点击鼠标可以生成新的rects），中间是我把buffer复制到的显示器canvas，下面是img元素，显示内容调用 clearRect() 后的缓冲区 canvas（始终正确显示任何内容）。

这是怎么回事？

Answer 1

您忘记了每次使用 .beginPath() 开始新路径（防止您遇到的事件堆叠问题）：

bufCanvas.addEventListener('mousedown', function (e) {
  ctx.clearRect(0, 0, 500, 500);
  buf.clearRect(0, 0, 500, 500);
  img.src = bufCanvas.toDataURL();
  buf.beginPath(); // < begin a new path
  buf.fillStyle = 'hsl(' + ~~(Math.random()*360) + ', 100%, 70%)';
  buf.rect(Math.random()*w, Math.random()*h, 20, 20);
  buf.fill();
  ctx.drawImage(bufCanvas, 0, 0);
});

HTML5 canvas 上下文未使用 clearRect() 清除

HTML5 canvas context doesn't clear with clearRect()

html

javascript

canvas