嘿，这个问题我之前也踩过坑——不同浏览器对Canvas合成模式的处理细节确实有差异，尤其是destination-out这种涉及像素擦除的操作，咱们一步步来拆解原因和解决办法。

问题根源分析 #

你当前的代码逻辑本身没问题，但Chrome和Firefox对Canvas绘制状态的管理比Safari更严格：

• 合成模式未重置：每次循环你设置了destination-out但没改回默认的source-over，这会导致下一次绘制视频帧时依然用destination-out模式，相当于用视频帧去擦除画布，结果就看不到预期的擦除效果了。
• 画布状态干扰：直接在主画布交替绘制视频和应用合成模式时，Chrome/Firefox的硬件加速渲染可能会对像素缓存做优化，导致合成操作的结果被视频帧覆盖或未正确生效。
• Mask的Alpha通道隐含问题：虽然你填充了红色矩形，但destination-out是基于源图像的Alpha通道工作的——如果mask画布的默认背景处理不明确，浏览器可能会对非绘制区域的Alpha值有不同的默认处理。

修复后的完整代码示例 #

我调整了代码，主要做了这几个关键修改：用离屏画布隔离合成逻辑、每次重置合成模式、明确初始化mask的透明背景，这样在三大浏览器都能正常工作：

HTML（补充canvas的原生宽高属性） #

<video id="video" autoplay muted loop src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<canvas id="canvas" width="300" height="200"></canvas>
<canvas id="mask" width="300" height="200"></canvas>

CSS（保持不变） #

video, canvas { width: 300px; height: 200px; border: 1px solid black; }

JavaScript（核心修改部分） #

const $video = document.getElementById("video")
const $canvas = document.getElementById("canvas");
const $mask = document.getElementById("mask");
const ctx = $canvas.getContext("2d");
const maskCtx = $mask.getContext("2d");

// 明确初始化mask：先填充全透明背景，再绘制红色不透明矩形
maskCtx.fillStyle = "rgba(0, 0, 0, 0)";
maskCtx.fillRect(0, 0, 300, 200);
maskCtx.fillStyle = "#FF0000";
maskCtx.fillRect(10, 10, 50, 50);

// 创建离屏画布，隔离视频绘制和合成操作
const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 300;
offscreenCanvas.height = 200;
const offscreenCtx = offscreenCanvas.getContext('2d');

const run = () => {
  // 每次循环先清空离屏画布，确保干净的绘制环境
  offscreenCtx.clearRect(0, 0, 300, 200);
  
  // 1. 先在离屏画布绘制视频帧
  offscreenCtx.drawImage($video, 0, 0, 300, 200);
  
  // 2. 切换到destination-out模式，绘制mask实现擦除
  offscreenCtx.globalCompositeOperation = "destination-out";
  offscreenCtx.drawImage($mask, 0, 0, 300, 200);
  
  // 3. 立即重置合成模式为默认的source-over，避免影响后续绘制
  offscreenCtx.globalCompositeOperation = "source-over";
  
  // 4. 将合成好的结果绘制到主画布
  ctx.clearRect(0, 0, 300, 200);
  ctx.drawImage(offscreenCanvas, 0, 0);
  
  window.requestAnimationFrame(run)
}

$video.onloadeddata = () => {
  run()
}

额外排查建议 #

如果还是有问题，可以试试这些方向：

• 关闭浏览器的硬件加速：Chrome和Firefox的硬件加速偶尔会导致Canvas合成异常，你可以在浏览器设置里禁用后测试。
• 检查Canvas污染：如果你的视频是跨域资源，确保服务器配置了CORS头，否则Canvas会被污染，无法正常进行像素操作。
• 测试不同的视频格式：某些视频编码可能和Canvas绘制有兼容性问题，换个MP4视频试试。

内容的提问来源于stack exchange，提问作者Uihyun Kim