你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于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. C++实现的哈希搜索

    C++实现的哈希搜索 程序内容 Complete a text searching engine using hash table. 完成一个文本搜索引擎,使用哈希表 程序设计 程序流程图 程序代码 ...

  2. pxe+preseed安装配置

    Ubuntu Server 部署手册 pxe+tftp+vsftp+apache2 ========================================================== ...

  3. android 开发 system/app目录下面有多个重复包名的apk，会不会冲突

    环境:已经拥有了root权限的android系统,我们的apk是开机启动 测试:将2个相同的版本拷贝到系统system/app目录下面 adb root #获取root权限,前提是已经开放了root权 ...

  4. 利用doScroll在IE浏览器里模仿DOMContentLoaded

    稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...

  5. Application, JDBC, 数据库连接池, Session, 数据库的关系

    RT,这几个东东已经困扰我很长一段时间了... 这次争取把她们理清楚了! 参考资料: 1. 数据库连接池:http://www.cnblogs.com/shipengzhi/archive/2011/ ...

  6. WP手机升级WIN10被PIN码锁定

    WP8.1手机升级WIN10后,需要输入PIN码(不知道啊),多次输入(1234,0000,8888 ...)后被锁定,无法使用手机(郁闷), 重启无数次,提示由于多次输入PIN码,手机无法使用(天啊 ...

  7. [百度空间] [原] 全局operator delete重载到DLL

    由于很久没有搞内存管理了,很多细节都忘记了今天项目要用到operator delete重载到DLL,发现了问题,网上搜索以后,再对比以前写的代码,发现了问题:原来MSVC默认的operator new ...

  8. ubuntu 安装完成后的工作

    以安装 ubuntu 15.10 为例 1. 备份并更改源 cd /etc/apt sudo cp source.list source.list.bak sudo vi source.list 删除 ...

  9. HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript

    HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript Though it's not ...

  10. Effeckt.css项目：CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...