你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于HTML5技术实现的刮刮卡效果，在PC上只需按住鼠标，在手机上你只需按住指头，轻轻刮去图层就可以模拟真实的刮奖效果。

我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后通过检测用户鼠标移到和手势来绘制一个透明的图形，这样就能看到Canvas背景下的真实图片，就达到刮刮卡效果。

教程地址：http://www.helloweba.com/view-blog-270.html

演示地址：http://www.helloweba.com/demo/guaguaka/

源码下载：http://www.helloweba.com/down-270.html

使用HTML5实现刮刮卡效果的更多相关文章

  1. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  2. Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

  3. Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...

  4. qt qml 刮刮卡效果

    用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...

  5. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  6. Atitit .html5刮刮卡的gui实现总结

    Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....posti ...

  7. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  8. HTML5 简单实现刮刮乐效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

随机推荐

  1. 实体框架 (EF) 入门 => 六、性能注意事项

    这个还真是复杂,看了看微软的文档,有些根本就看不懂,有些能看懂,但对我这种菜鸟也不会去用. 无从下手啊,前面放了几个链接,挨个试试吧. 一.显式打开连接 这个我测试过,有些时候,需要我们显示打开连接, ...

  2. arm-elf-gcc交叉编译器的使用教程

    arm-elf-gcc交叉编译器的使用教程 一开始需要安装arm-elf-gcc,但是这是一个32位的程序,我是安装了64位的系统,据说安装ia32.libs依赖库能运行这个,但是看到博客上面前人安装 ...

  3. CRT团队组员博客地址统计

    CRT团队GitHub地址:https://github.com/CoffeeRobotTeam/Coffee-Robot-System 洪超 http://www.cnblogs.com/chaoh ...

  4. mysql字符集基础知识梳理

    接着上一篇继续来一篇关于mysql字符设置等问题学习笔记,这篇就不说什么废话了,直接进入正题,不过还是感谢十八哥的无私分享! 我们首先看看mysql整个数据存储和读取一个流程: 连接器(connect ...

  5. 学习笔记--HashMap浅析

    HashMap 实现了Map 接口,其底层以一个线性数组保存哈希表,所以它既有数组查询的高效,也有哈希存取的方便. HashMap提供了默认构造器,和有参构造器,在有参构造器中,提供了两个参数,可以对 ...

  6. 拓展Jquery对象，实现Post提交并跳转

    $.extend({ StandardPost:function(url,args){ var body = $(document.body), form = $("<form met ...

  7. Careercup - Google面试题 - 5634470967246848

    2014-05-06 07:11 题目链接 原题: Find a shortest path ,) to (N,N), assume is destination, use memorization ...

  8. Netsharp快速入门(之15) 销售管理(报表B 销售季度表)

    作者:秋时 杨昶   转载须说明出处 4.6.2  销售季度表(交叉表) 1.1.1.1 交叉表带数据源和不带数据源区别 带数据源的可以自定义数据源,可以从实体,也可以从Sql脚本得到数据源,并能自定 ...

  9. github/gitlab 管理多个ssh key

    github/gitlab 管理多个ssh key 以前只使用一个 ssh key 在github上提交代码,由于工作原因,需要再添加一个ssh key在公司的 gitlab上提交代码,下面记录下配置 ...

  10. 三级联动（ajax）

    <body> <div id="zhuti"></div> </body><script type="text/ja ...