矩形

你可以使用 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。在某些情況下，儲存和恢復可能很慢，如果不需要，通常應該避免。