你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于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. iOS 进阶 第十七天(0420)

    0420 凡是继承了UIResponder的类都可以做响应者 响应事件的传递是由底到高来传递,响应者链条是由高到底来响应 相应事件的传递(由底到高 找到正在和用户触摸交互的view) 准则:事件由父控 ...

  2. linux matplotlib入门

    python linux matplotlib 安装:   sudo apt-get install python-numpy 必须 先安装numpy matplotlib 安装:   sudo ap ...

  3. VS2013中常用的一些快捷键

    1.编辑时需要前后文切换: 需要自己设置为:ctrl+alt +方向键,向前查看,设置为右方向键,向后查看,设置为左方向键 依次选择:工具->选项->环境->键盘-> 2.查看 ...

  4. <<梦断代码>>读书笔记

    从任何角度,Chandler项目开始时都是值得羡慕的.虽然是讲一个软件项目是如何失败的,不过里面有让我觉得很有意思. 失败了就进行反思:定位不能逆时代的潮流, 互联网的趋势不可逆转,人员沟通与合作是永 ...

  5. 如何维护SSH安全

    遇到两次,一次是公司服务器搭建好后,有人尝试ssh暴力破解,auth.log不停出现错误提示 还有买的米国vps,很荣幸地遭到来自波兰的ssh破解尝试 不得不重视ssh的安全 方法: 修改sshd_c ...

  6. Unity3D中灵活绘制进度条

    有时我们需要在Unity3D中绘制进度条,如:           或        如果使用4.6版本以下的unity绘制环形的进度条可能需要费点劲.我搜到的大多数方法都是用NGUI插件,但有时只是 ...

  7. 关于VS2010中一打字，换行，拖控件便出现卡死的问题的解决方案

    大家好,这是我第一篇博文. 最近一个月都是静静的观看,想发帖子很久了. 最近实习完刚换了份工作,入职之后啊先是装了一堆软件.然后,便出现问题,就是VS2010上码字和切换页面的时候会卡.开始的时候每次 ...

  8. Using sql azure for Elmah

    The MSDN docs contain the list of T-SQL that is either partially supported or not supported.  For ex ...

  9. hdu 1043 Eight 经典八数码问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1043 The 15-puzzle has been around for over 100 years ...

  10. 【BZOJ】【3280】小R的烦恼

    网络流/费用流 和软件开发那题基本相同,只是多加了一个“雇佣研究生”的限制:不同价格的研究生有不同的数量…… 那么只需加一个附加源点,对每一种研究生连边 S->ss 容量为l[i],费用为p[i ...