你玩过刮刮卡么？一不小心可以中奖的那种。今天我给大家分享一个基于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# 各种排序算法+找第二大的数+句子单词反转

    冒泡排序 // 冒泡排序 bubble sort public static int[] BubbleSort(int []array) { bool isContinue = true; ; i & ...

  2. CommonsChunkPlugin的使用（关于angular2中的polyfills和vendor的疑问解决）

    seed: angular2-webpack-starter(在github上可以找到) polyfills:提供api以方便兼容不同的浏览器 vendor:项目插件扩展 在学习ng2中一直不明白为什 ...

  3. [SSH服务]——一个SSH无密码登陆实验

    实验拓扑图 实验描述 机房内有两台服务器: (1)B服务器10.0.10.158,充当Web服务器,有普通用户user_00 (2)C服务器10.0.10.191,充当Mysql服务器,有普通用户us ...

  4. mobiscroll 控件的使用(手机端日历控件)

    先上一张图吧: 控件的下载地址:http://www.kuitao8.com/20140604/2615.shtml 文档API地址:http://docs.mobiscroll.com/2-13-2 ...

  5. json序列指定名称

    class jsonModel{ public string md5 { get; set; } public object report { get; set; } public string @v ...

  6. NEST.net Client For Elasticsearch简单应用

    NEST.net Client For Elasticsearch简单应用 由于最近的一个项目中的搜索部分要用到 Elasticsearch 来实现搜索功能,苦于英文差及该方面的系统性资料不好找,在实 ...

  7. 【Longest Valid Parentheses】cpp

    题目: Given a string containing just the characters '(' and ')', find the length of the longest valid ...

  8. 设置 Eclipse 智能代码提示,大幅度减少 alt+/ 使用频率，打每个字都出现代码提示的办法

    以前网上有个英文版本的,现在自己汉化一下...O(∩_∩)O 哈哈 ~   http://www.cnblogs.com/lidabo/archive/2013/03/05/2944245.html ...

  9. UVALive - 6575 Odd and Even Zeroes 数位dp+找规律

    题目链接: http://acm.hust.edu.cn/vjudge/problem/48419 Odd and Even Zeroes Time Limit: 3000MS 问题描述 In mat ...

  10. 线段树--Color the ball（多次染色问题）

    K - Color the ball Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...