当前位置：首页 > news >正文

在JavaScript中，清除 Canvas 画布上的内容

news 2025/10/21 7:00:19

在 HTML5 的 Canvas 中，可以通过多种方法清除画布上的内容，具体取决于需要清除的区域和形状。以下是几种常用方法及其实现方式：

使用 clearRect 方法

这是最常用的方法，用于清除指定的矩形区域。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");// 清除从 (50, 50) 开始，宽 100，高 100 的矩形区域
ctx.clearRect(50, 50, 100, 100);

优点: 简单高效，适合清除矩形区域。局限: 无法直接清除非矩形区域。

使用路径裁剪后清除

对于非矩形区域，可以结合路径裁剪来清除内容。

ctx.save();
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 定义圆形路径
ctx.clip(); // 设置裁剪区域
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除裁剪区域内内容
ctx.restore();

优点: 支持任意形状的清除。局限: 需要额外管理裁剪状态。

使用 globalCompositeOperation

通过设置混合模式 destination-out，绘制透明形状来清除内容。

ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(150, 150, 30, 0, 2 * Math.PI); // 定义圆形路径
ctx.fill(); // 填充透明形状，清除内容
ctx.globalCompositeOperation = "source-over"; // 恢复默认模式

优点: 支持复杂形状的清除。局限: 混合模式可能影响后续绘制。

重置画布尺寸

通过重设 Canvas 的宽度或高度来完全清空画布内容。

canvas.width = canvas.width; // 或者 canvas.height = canvas.height;

优点: 简单直接，适合完全清空画布。局限: 会丢失所有内容，不适合部分清除。

使用离屏画布

将内容绘制到离屏画布中，仅重绘未清除部分。

const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;
const offCtx = offscreenCanvas.getContext('2d');// 在离屏画布上绘制内容
offCtx.fillStyle = "blue";
offCtx.fillRect(50, 50, 200, 200);// 将离屏内容绘制到主画布
ctx.drawImage(offscreenCanvas, 0, 0);// 清除主画布部分内容并重新绘制离屏内容
ctx.clearRect(50, 50, 100, 100);
ctx.drawImage(offscreenCanvas, 0, 0);