javascript - 如何快速清除Canvas图形组合模式？

Question

尝试Canvas组合图形功能后，想清除图形从新绘图。我该如何操作？每次都重绘新的矩形Canvas虽然有效，但并不是最好的办法，有没有更加简便实用的方法？

原问题：How to clear the canvas for redrawing

Answer 1

javascript - Canvas グラフィックス合成モードをすばやくクリアするにはどうすればよいですか? -PHP中国語Q&A-javascript - Canvasグラフィックス結合モードを素早くクリアするにはどうすればよいですか? -PHP中国語サイトQ&A

ぜひ見て学んでください。

Answer 2

答案：
Pentium10：

context.clearRect ( x , y , w , h ); 
or 
canvas.width = canvas.width;Prestaul：

---

Prestaul：

一种方法是重置canvas.width和所有canvas状态（如transformations,lineWidth,strokeStyle等）。
另一种更快捷的方法是使用ctx.clearRect(0,0,canvas.width,canvas.height)。如果你已经修改了变形矩阵，可能会导致清除不全。所以要优先重置变形矩阵状态：

// Store the current transformation matrix
ctx.save();
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transform
ctx.restore();

我在Chrome中做了一些分析，清除300x150（默认尺寸）的Canvas比重置矩形要快10%。随着Canvas尺寸的增大，所用的时间也会逐渐拉开差距。

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

---

trembl：如果你绘制了线条，不要忘记context.beginPath(); 否则线条清除不掉。

---

JonathanK：别人已经提出了很好的解决方案，也许context.clear()方法对于你也会有用。

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

Usage:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

---

orion elenzil：
如果你想在原先的图片上添加点乐趣，只清除部分Canvas的话可以尝试”淡出“效果，这个很容易实现，仅需添加一个白色背景。

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);