你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于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. Mono for Android （1） 之布局

    最近和同事交接工作,首次接触mono for android, 结果画view时少了layout,页面没办法出来,各种冥思,各种找问题,最后把关于布局的一些共享出来(同事写的,哈哈):   Andro ...

  2. CS小分队第一阶段冲刺站立会议（5月10日）

    昨日成果:完成了从excel表格导入名单,并且进行抽号的功能 遇到的困难: 1.Excel表格导入时由于版本不同,导致旧版本无法显示,后经修改初步解决 2.改程序无法在未安装office excel驱 ...

  3. C Shell 中的特殊变量

    恢复 $0,当前脚本的文件名 $n,传递给脚本或函数的参数,n是一个数字,表示第几个参数 $#,传递给脚本或函数的参数个数 $*,传递给脚本或函数的所有参数 $?,函数的返回值 $$,当前shell的 ...

  4. Spring Mvc 输出Json(iwantmoon.com出品)

    原文:http://iwantmoon.com/Post/f94e49caf9b6455db7158474bab4c4dd 因为工作需要,现在要去做开放平台,考虑了多种方案之后,基本确定 下来,Htt ...

  5. android 自动化压力测试-monkey 2 获取程序包名

    monkey 1 中我们写到: C:\Users\chenshan>adb shell shell@hwG750-T20:/ $ monkey -p cn.emoney.acg -v 500 说 ...

  6. Leetcode#73 Set Matrix Zeroes

    原题地址 用矩形的第一行和第一列充当mask 代码: void setZeroes(vector<vector<int> > &matrix) { ].empty()) ...

  7. JDBC编程步骤

    JDBC编程步骤 加载数据库驱动. 通常使用Class类的forName()静态方法来加载驱动. Class.forName(driverClass) dirverClass: mysql---Cla ...

  8. 说说php取余运算(%)的那点事

    http://www.phpddt.com/php/php-take-over.html       fmod()与 % 区别   都是取余 fmod是函数 原型float fmod(float x, ...

  9. wifidog源码分析 - 初始化阶段

    Wifidog是一个linux下开源的认证网关软件,它主要用于配合认证服务器实现无线路由器的认证放行功能. wifidog是一个后台的服务程序,可以通过wdctrl命令对wifidog主程序进行控制. ...

  10. Sqli-labs less 26a

    Less-26a 这关与26的区别在于,sql语句添加了一个括号,同时在sql语句执行抛出错误后并不在前台页面输出.所有我们排除报错注入,这里依旧是利用union注入. sql语句为SELECT * ...