destination-in 裁剪的核心是先绘目标内容，再以不透明形状为蒙版保留重叠区域：需确保顺序正确、蒙版已填充且画布启用 alpha 通道。
Canvas 的 globalCompositeOperation = "destination-in" 可以实现“用图形A作为蒙版，只保留画布上与A重叠的已有内容”——这正是不规则形状裁剪的核心原理。关键不在“画新图形”，而在“保留旧内容中被指定形状覆盖的部分”。
Destination-In 裁剪的本质逻辑
该模式要求两步操作：先在画布上绘制目标图像（或内容），再在其上绘制一个不透明的裁剪形状（如路径、图片、文字等）。设置 globalCompositeOperation = "destination-in" 后，只有原图像中与裁剪形状重叠的区域会被保留，其余部分变为完全透明。
注意：裁剪形状本身必须是不透明的（alpha = 1），且其颜色值无关紧要（纯黑、纯白或任意色均可），真正起作用的是它的 alpha 通道。
基础裁剪步骤（以路径为例）
以下代码将一张图片按自定义五角星路径裁剪：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>// 1. 绘制原始图像（铺满画布）
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);</p><p>// 2. 切换合成模式
ctx.globalCompositeOperation = 'destination-in';</p><p>// 3. 绘制裁剪路径（五角星）
ctx.beginPath();
for (let i = 0; i 2 Math.PI / 5;
const x = canvas.width/2 + 100 <em> Math.cos(angle);
const y = canvas.height/2 + 100 </em> Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill(); // 必须 fill，且 fillStyle 不透明（默认 black 即可）</p><p>// 4. （可选）恢复默认合成模式，便于后续绘制
ctx.globalCompositeOperation = 'source-over';
};
img.src = 'photo.jpg';</p>常见问题与注意事项
- 必须先画内容，再画蒙版：顺序颠倒会导致空白结果（因为 destination-in 依赖已有像素）
- 确保裁剪路径已填充（fill）：仅 stroke 不起作用；fillStyle 默认为 #000000（不透明），无需额外设置
-
Canvas 需启用 Alpha：若 canvas 元素带
alpha="false"属性或通过getContext('2d', {alpha: false})创建，destination-in 将失效 -
避免抗锯齿干扰：边缘轻微半透明可能造成裁剪毛边，可在绘制路径前加
ctx.imageSmoothingEnabled = false（对路径影响小，但对图片缩放有帮助） -
裁剪后无法直接读取像素：若需导出裁剪结果，调用
canvas.toDataURL()或canvas.getContext('2d').getImageData(...)即可
扩展：用图片或文字作裁剪蒙版
蒙版不限于路径。例如用 PNG 图片（含透明通道）做蒙版：
// 绘制图片后，直接 drawImage 一张带 alpha 的 PNG（如 logo.png） ctx.globalCompositeOperation = 'destination-in'; ctx.drawImage(maskImg, 0, 0); // maskImg 是已加载的透明 PNG
文字同理：用 fillText() 绘制文字，字体设为不透明，即可作为文字形状蒙版——适合制作文字镂空效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
