刮刮卡:利用HTML5的画布Canvas的实现移动端刮刮卡效果

我们利用HTML5的画布canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。
HTML
我们只需要在页面中加入canvas标签元素,其他的就看javascript的了。注意canvas元素是HTML5才有的元素,运行在支持HTML5的现代浏览器上,特别是移动。

1.png - 大小: 40.87 KB - 尺寸: 966 x 542 - 点击打开新窗口浏览全图


DEMO:

http://www.jincon.com/download/guaguaka/

关键词: canvas , 刮刮卡

上一篇: PHP+jQuery实现的大转盘抽奖程序
下一篇: 砸金蛋:PHP+jQuery实现的砸金蛋中奖功能

目前还没有人评论,您发表点看法?
发表评论

评论内容 (必填):