HTML5 Canvas实现刮刮卡效果

很早以前就接触过Canvas, 一直也没有发现它的实际用处,前些天面试有个人说了个刮刮卡刮奖的效果,今天有时间就自己实现了效果。

刮刮卡主要是用canvas实现一个覆盖的图层,在触摸事件发生时,消除掉当前触摸点的图层,计算消除掉的面积占整个面积的百分比,达到一定比例就可以看见中奖结果了,所以就自动全部清除覆盖图层。底层文字就正确显示出来了。

用到的Cavans功能主要有矩形填充底色,清除一定半径圆点的底色(改点像素透明),获取图层的所有像素,计算像素中擦除的像素所占百分比。

效果预览:http://histriver.com/apps/canvas/guaguaka.html

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>