先给大家展示下效果图： 刮刮卡需求： 每一位用户有三次刮刮卡的机会本次刮刮卡的结果会覆盖上次的结果刮刮卡的中奖几率呈现为递增的曲线（保证三次中必须有一次中奖）刮出的结果包含按钮既（领取奖品 or 再来一次 ）分享活动奖品升级（这里主要是微信分享的回调了）我们自己的需求，今天就说怎么制作刮刮卡，有这样需求的可以找我要源码 第一、body创建Canvas XML/HTML Code复制内容到剪贴板                 <span class=btn 

文章目录实现刮刮卡了解canvas的透明设置ImageData对象得到场景像素数据全局透明度的设置覆盖合成实现刮刮卡后记 实现刮刮卡 了解canvas的透明设置 ImageData对象 ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性： width:图片宽度，单位是像素 height:图片高度，单位是像素 data:Uint8ClampedArray类型的一维数组， 包含着RGBA格式的整型数据，范围在0至255之间（包括255） R:0 –> 255(