使用 clearRect() 无法清除 HTML5 画布上下文

Question

我有两个画布：一个缓冲区和一个显示画布，其上下文通过缓冲区画布调用 drawImage()。在添加新对象和调用 drawImage() 之前，我 clearRect() 两个画布，但两者都显示所有先前添加的对象。这是添加对象的代码（查看下面的完整 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/

顶部是缓冲区（在此处单击鼠标以生成新的矩形），中间是我将缓冲区复制到的显示画布，底部是一个 img 元素，在我调用后显示缓冲区画布的内容clearRect() （它总是正确地不显示任何内容）。

这是怎么回事？

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);
});