你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于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. Eclipse快捷键壁纸-0基础必备

  2. [网络配置相关]——ifconfig命令、ip命令、route命令

    ifconfig命令 1. 查看已被激活的网卡的详细信息 # ifconfig eth0 Link encap:Ethernet HWaddr 00:30:67:F2:10:CF inet addr: ...

  3. c++11并发程序设计(1)

    第一章:你好 c++的并发世界 1.何为并发 最简单和最基本的并发,是指两个或两个以上的独立活动同时进行. 对于单个处理单元或者核心,这种机器只能在某一时刻执行一个任务,不够它可以每秒进行多次的任务切 ...

  4. 自己学习编程时间比较短，现在把一下自己以前刚刚接触C++时的程序上传一下，有空可以看看

    键盘输入十个数,找出最大值和最小值. #include<iostream.h>void main (){int a[10];int i,t,max,min;cout<<&quo ...

  5. 【转载】错误：ORA-28002： the password will expire within 7 days 解决方法

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:xwdreamer      原文地址: 错误:ORA-28002: the ...

  6. 【VS2012】项目文件夹管理

    项目中添加文件夹 " 项目"显示所有文件 在"显示所有文件"的情况下,可以创建文件件 "新建文件夹"需要添加到物理路径中时,可以选择&quo ...

  7. BZOJ3170: [Tjoi 2013]松鼠聚会

    3170: [Tjoi 2013]松鼠聚会 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 531  Solved: 249[Submit][Statu ...

  8. webservice之XFire的使用（java调用java）

    注意:xfire不支持java.util.List等集合,所以调用webservice传递的参数要为基本类型. 转自:http://zp9245.blog.163.com/blog/static/10 ...

  9. Using Hooks

    The following code examples demonstrate how to perform the following tasks associated with hooks: In ...

  10. Python中的正则表达式regular expression

    1 match = re.search(pat,str)  If the search is successful, search() returns a match object or None o ...