矩形

你可以使用 clearRect 方法清除画布的任何矩形部分。

// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

注意： clearRect 取决于变换矩阵。

为了解决这个问题，可以在清除画布之前重置转换矩阵。

ctx.save();                                       // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0);               // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore();                                    // Revert context state including 
                                                  // transformation matrix

注意： 如果你希望保持画布 2D 上下文状态，则仅需要 ctx.save 和 ctx.restore。在某些情况下，保存和恢复可能很慢，如果不需要，通常应该避免。