Question

我有两个画布：一个缓冲区和一个显示画布，其上下文使用缓冲画布进行drawImage（）调用。我在添加新对象和调用drawImage（）之前清除了两个画布，但两个都显示了所有以前添加的对象。这是添加对象的代码（请查看下面的完整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/

顶部是缓冲区（在那里单击鼠标以生成新的rects），中间是我将缓冲区复制到的显示画布，底部是一个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);
});

使用clearRect（）不清除HTML5画布上下文

1 个答案: