HTML5 的 Canvas 元素原生提供了绘制图片、文字、矩形、圆弧轨迹、自定义轨迹等图形的方法，也提供了对 Canvas 渲染上下文进行平移、缩放、旋转等操作的方法，但却没有提供一个简单的清空画布的方法。

使用 clearRect() 方法清空画布

因此，为了清空画布，我们可以借助 clearRect() 方法。

void ctx.clearRect(x, y, width, height);

该方法接受四个参数，分别是矩形起点的 x, y 坐标，以及该矩形的宽高。可以将该矩形范围内的内容清空，即将其中的每一个像素置为透明。

因此，我们可以有如下清空画布的方法：

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

其中， canvas 是 HTMLCanvasElement， context 是该元素的渲染上下文 CanvasRenderingContext2D。

但是，这个方法只在 canvas 的渲染上下文没有进行过平移、缩放、旋转等变换时有效，如果 canvas 的渲染上下文已经经过了变换，那么在使用 clearRect() 清空画布前，需要先重置变换，否则 clearRect() 将无法有效地清楚整块画布。

具体代码片段如下所示：

// 保存当前渲染上下文所进行的变换
context.save();

// 重置渲染上下文并清空画布
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// 恢复先前渲染上下文所进行的变换
context.restore();

重置 canvas 宽高清空画布

此外，我们还可以使用以下代码来重置画布：

canvas.width = canvas.width

或

canvas.height = canvas.height

通过重设 canvas 的宽高（即使新的宽高与原先相同），可以重置整个 canvas，包括清空画布上的所有内容。

但是，通过重设宽高来清空画布有几个缺点：

  • 不够直观： 阅读代码会较难以确定代码的意图；
  • 有副作用： 重设画布的宽高，除了会清空画布，还带有重置画布的渲染上下文的副作用，即原先对渲染上下文所做的各种变换（平移、缩放、旋转等）将会丢失。容易在没注意的情况下引入 bug。

参考