无意中看到个刮刮奖的效果,觉得很有意思.就想自己也做一个,怎样用html5及javascript实现呢,回忆以前 做报表的时候,用过html5 canvas元素.心里就有思路了. 惯例先用关键字在网上搜索了下,发现一些例子,已经做得很不错了,完全可以拿来主义.嘿… 自己简单改了下,就发布 ...

近年来由于移动设备对HTML5的较好支持，经常有活动用刮奖的效果，最近也在看H5方面的内容，就自己实现了一个，现分享出来跟大家交流。 1、效果 2、原理 原理很简单，就是在刮奖区添加两个canvas，第一个canvas用于显示刮开后显示的内容，可以是一张图片或一个字符串，第二个 ...

要实现刮奖效果，最重要的是要找到一种方法：当刮开上层的涂层是就能看到下层的结果。而HTML5的canvas API中有一个属性globalCompositeOperation，这个属性有多个值，而实现刮奖效果要用到的值就是destination-out。意思就是：在已有内容和新图形不重叠的地方 ...

　　这周有点迷茫，不知道干嘛了，一天天就过去了！我在博客右侧公告栏加了qq交流，各位有好的主题，或者有趣的技术，欢迎交流！今天突发奇想，就写了2个h5 canvas的demo玩玩！ demo一：刮刮乐 　　舍不得买2块钱的刮刮乐，就只能写个类似的功能过过彩票瘾了！ 布局 这段 ...

前言 HTML5的canvas有很多应用点，如绘画板、图形绘制、游戏交互、彩票刮刮乐等，除了这些，还有个比较好的点就是主页涂抹一部分之后，页面消失进入主要内容。 wScratch是一个模拟刮刮卡的jQuery插件，可以设置刮开纯色或者图像。 演示 显示刮卡百分比 到达一定百分比清空 ...

效果体验：http://keleyi.com/a/bjad/uaq24pxt.htm其中拖拽刮涂层效果使用jquery UI的draggable方法，请参考：http://keleyi.com/a/bjac/9dd21532ed1dbf23.htm以下是源代码： web前端 ...

玩游戏的人 很多时候都会遇到翻牌子 开宝箱。 总有人傻傻的在哪里还纠结很久到底点哪一个！ 纠结 指不定翻哪一个会多一点，你明明看到那个卡片的奖项多 。 那我就告诉你好了 其实很多时候在你点开那个页面的时候你的翻牌结果已经随着你点开而请求到了。 接下来 就是一些动画效果 然后告诉 ...

实现方法： 　　（1）利用canvas画布，fillRect()描绘出一个矩形（不是透明），定位盖在某个标签如div上面（这个标签写着中奖的信息） 　　（2）globalCompositeOperation = 'destination-out';利用此属性，手指划过画布，arc(x,y ...