canvas全局合成操作globalcompositeoperation是实现图像遮罩裁剪和刮刮乐效果的核心，关键模式为destination-out（擦除已有像素）和source-over（默认叠加），需显式切换并注意作用范围与分层管理。
Canvas 的全局合成（globalCompositeOperation）是实现图像遮罩裁剪和刮刮乐效果的核心机制，关键在于控制“绘制内容”与“已有画布内容”之间的像素级混合规则，而非简单叠加。
理解关键合成模式：destination-out 与 source-over
实现遮罩和刮刮乐主要依赖两个模式：
- destination-out：新绘制的内容作为“擦除区域”，把画布上已存在的像素（且不透明部分）清为透明。这是刮刮乐“刮开”和遮罩“挖空”的基础。
- source-over（默认）：新内容正常绘制在旧内容之上，用于铺底图、盖遮罩层或绘制刮刮涂层。
注意：globalCompositeOperation 是画布上下文的状态，每次切换需显式设置；它只影响后续的绘制操作，不影响之前已绘制的内容。
实现图像遮罩裁剪（如圆形头像、自定义形状）
思路：先绘制目标图像，再用 desired shape（如圆、路径）以 destination-out 模式“挖掉”不需要的部分，留下遮罩后的图像。
示例步骤（圆形遮罩）：
- 用
drawImage()绘制原始图片到 canvas 上； - 调用
ctx.globalCompositeOperation = 'destination-out'； - 用
arc()绘制一个与目标区域等大的圆，并fill()—— 此时圆内区域变透明，形成圆形裁剪效果； - （可选）重置为
'source-over'以便后续绘制。
⚠️ 注意：若图片未完全覆盖 canvas，需确保遮罩路径落在图像区域内，否则可能误擦空白区。更稳健做法是先将图像绘制到离屏 canvas，再对该离屏 canvas 应用遮罩，最后 draw 到主 canvas。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实现刮刮乐效果（手指/鼠标刮开涂层显示底层内容）
核心是分层管理：底层放奖品图，中层铺不透明刮刮涂层（如深色半透色块或纹理），顶层响应交互擦除中层。
典型结构与操作：
- 准备两层 canvas（或同一 canvas 分阶段绘制）：先
drawImage(prizeImg)作为底层； - 用
fillRect()或drawImage(brushTexture)铺满一层灰色涂层（如rgba(100,100,100,0.8)）； - 监听
mousedown/touchstart→mousemove/touchmove，在移动路径上连续绘制圆形/线条； - 绘制前设
ctx.globalCompositeOperation = 'destination-out'，并用ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fill();擦除涂层； - 为提升性能与手感，建议开启
ctx.lineCap = 'round'; ctx.lineJoin = 'round'，并用lineWidth控制刮擦粗细。
进阶提示：可用 ctx.putImageData() + 像素操作实现更精准的橡皮擦边缘，但 destination-out 已能满足绝大多数刮刮乐需求。
常见陷阱与优化建议
容易出错的地方：
- 忘记重置
globalCompositeOperation，导致后续所有绘制异常； - 在未清除 canvas 或未分层时直接使用
destination-out，把整个画布擦成透明； - 移动端 touch 事件未阻止默认行为（
e.preventDefault()），导致页面滚动干扰刮擦； - 高频
mousemove导致绘制过载，建议节流（throttle）或合并路径点再批量绘制。
小技巧：用 ctx.save() / ctx.restore() 临时保存/恢复合成状态，比手动重置更安全；刮刮涂层可用带噪点的 canvas pattern 替代纯色，增强真实感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
