Javascript HTML5画布上下文不'；t使用clearRect（）清除

我有两个画布：一个缓冲区和一个显示画布，其上下文使用缓冲区画布获取drawImage（）调用。在添加新对象和调用drawImage（）之前，我使用clearRect（）两个画布，但都显示以前添加的所有对象。这是添加对象的代码（查看下面完整的JSFIDLE）：

JSFiddle：

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

---

这是怎么回事？

您忘记了每次使用时都要开始一个新路径（防止您看到的事件堆叠问题）：

bufCanvas.addEventListener（'mousedown'，函数（e）{
ctx.clearRect（0,0500500）；
buf.clearRect（0,0,500,500）；
img.src=bufCanvas.toDataURL（）；
buf.beginPath（）；//<开始新路径
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）；
});

啊，谢谢，我以为你在画线时只需要开始/关闭路径。不要吹毛求疵，但使用

fill（）

时不需要

closePath（）

，因为

fill（）

将在内部关闭它（临时）。在任何情况下，在

fill（）

之后调用

closePath（）

都没有意义。只要我的2美分。

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

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