如何使用fill实现与clearRect相同的Canvas透明清除效果？

我有两个Canvas画布，上层叠加在下层之上用于添加特效。使用clearRect可以清除上层内容，让下层内容显示出来，但有时需要对非矩形形状实现同样效果。查阅资料得知clearRect会将像素设为透明黑色，但使用fillStyle = "rgba(0, 0, 0, 0)"填充却没有效果。实际代码中我用beginPath()、lineTo()、closePath()、fill()绘制路径，以下测试代码可复现问题：

<!DOCTYPE html>
<html>

<body style="height:100%; display:block; overflow: hidden">

   <canvas id="canv" style="width:100%; height:100%; position:absolute; z-index:1"></canvas>
   <canvas id="canv2" style="width:100%; height:100%; position:absolute; z-index:2"></canvas>

   <script>

      const c = document.getElementById("canv");
      const ctx = c.getContext("2d");

      ctx.imageSmoothingEnabled = false;
      c.width = c.clientWidth;
      c.height = c.clientHeight;

      const c2 = document.getElementById("canv2");
      const ctx2 = c2.getContext("2d");

      ctx2.imageSmoothingEnabled = false;
      c2.width = c2.clientWidth;
      c2.height = c2.clientHeight;

      // 下层画布绘制绿色正方形
      ctx.fillStyle = "green";
      ctx.fillRect(100, 100, 500, 500);

      // 上层画布绘制蓝色正方形
      ctx2.fillStyle = "blue";
      ctx2.fillRect(120, 120, 460, 460);

      // 用clearRect清除上层左上角区域，显示下层绿色
      ctx2.clearRect(120, 120, 200, 200);

      // 尝试用透明色填充右下角区域，但无效果
      ctx2.fillStyle = "rgba(0, 0, 0, 0)";
      ctx2.fillRect(380, 380, 200, 200);

   </script>

</body>
</html>

解决方案 #

问题核心在于Canvas的合成模式：默认的source-over模式下，透明色填充只会和原有像素混合，无法清除内容。要实现和clearRect一致的清除效果，需要切换到destination-out合成模式——该模式会让绘制区域直接挖空画布上的原有像素，支持任意形状。

具体实现步骤 #

• 在执行填充操作前，设置globalCompositeOperation为destination-out
• 填充时可以用任意颜色（透明或不透明均可，合成模式决定了清除行为）
• 清除完成后，记得将合成模式恢复为默认的source-over，避免影响后续绘制

修改后的测试代码示例 #

// 替换原有的透明填充代码
ctx2.globalCompositeOperation = "destination-out";
ctx2.fillStyle = "rgba(0, 0, 0, 0)"; // 这里用任意颜色都生效，比如"#000"也可以
ctx2.fillRect(380, 380, 200, 200);
ctx2.globalCompositeOperation = "source-over"; // 恢复默认合成模式

非矩形路径的清除用法 #

对于圆形、多边形等非矩形路径，用法完全一致：

ctx2.globalCompositeOperation = "destination-out";
ctx2.beginPath();
ctx2.arc(300, 300, 100, 0, Math.PI * 2); // 绘制圆形路径
ctx2.fill();
ctx2.globalCompositeOperation = "source-over";

补充说明：clearRect是直接将目标像素设为透明黑色，绕过了合成模式；而destination-out是通过绘制操作实现像素清除，两者最终效果一致，后者支持任意自定义形状。

内容的提问来源于stack exchange，提问作者Adam Benson