HTMLCanvas怎么实现刮奖卡片交互效果

在前端开发内容学习中，HTML Canvas 怎么实现刮奖卡片交互效果是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

Canvas刮奖卡片效果通过双层Canvas实现：底层显示中奖内容，上层用globalCompositeOperation="destination-out"绘制可擦除涂层；监听鼠标/触摸事件，以圆形或圆角矩形连续擦除；最后通过getImageData检测擦除面积占比触发反馈。

Canvas 实现刮奖卡片效果，核心是利用 globalCompositeOperation = "destination-out" 模式，在遮罩层上“擦除”涂层，露出底层内容。关键不在画图本身，而在像素级的擦除逻辑和触摸/鼠标事件的适配。

准备两层 Canvas 结构

刮奖效果本质是“遮罩+擦除”，需要两个叠放的 canvas：

• 底层 canvas：绘制中奖文字、图标或背景图案（比如“恭喜中奖！”）
• 上层 canvas：铺满灰色/金色刮刮乐涂层（用 fillRect 绘制纯色），作为可擦除层

两个 canvas 宽高完全一致，用 CSS 叠加定位（position: relative/absolute），确保坐标对齐。

设置擦除模式并监听交互事件

在上层 canvas 的 2D 上下文中启用“擦除”混合模式：

ctx.globalCompositeOperation = "destination-out";

再绑定鼠标或触摸事件：

• mousedown + mousemove + mouseup（桌面端）
• touchstart + touchmove + touchend（移动端）

注意：touch 事件需调用 event.preventDefault() 防止页面滚动；获取坐标时，touch 用 touches[0]，mouse 用 clientX/Y 减去 canvas 偏移量（getBoundingClientRect()）。

用圆角矩形或圆形模拟刮擦笔触

直接画线容易断裂，推荐用带半径的圆角矩形或实心圆连续绘制：

• 每次移动时，以当前点为中心画一个半径 15–25px 的实心圆（arc + fill）
• 或用 roundRect（Chrome 117+ 支持）画短段路径，更自然
• 开启 ctx.lineCap = "round" 和 ctx.lineJoin = "round"，再配合 lineWidth 画路径，也能实现连贯刮擦

关键：所有绘制操作都在上层 canvas 执行，且必须保持 destination-out 模式，才能真正“擦掉”涂层、透出下层内容。

添加刮开面积检测与反馈

单纯视觉擦除不够，用户需要明确提示是否刮开足够区域。可行做法：

• 用 ctx.getImageData(0, 0, width, height) 获取上层 canvas 像素数据
• 遍历像素，统计 alpha 值为 0 的像素占比（即被擦除区域）
• 当占比超过阈值（如 60%），触发中奖逻辑（弹窗、动画、跳转等）

注意：频繁读取像素较耗性能，建议节流（如每 500ms 检测一次），或只在 mouseup/touchend 后检查一次。