canvas实现刮刮卡效果

实现步骤：

  1. 设置页面背景图，即刮刮卡底部图片
  2. 绘制canvas 刮刮卡顶部图片drawImage
  3. 绑定事件 addEventListener  touchstart、touchmove

完整代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

     <title>02</title>

     <style type="text/css">

         * {

             padding: 0;

             margin: 0;

         }

         html, body {

             height: 100%;

             overflow: hidden;

         }

         #wrap {

             height: 100%;

             overflow: hidden;

         }

         #wrap > div {

             height: 100%;

             background-image: url(1.jpg);

             background-repeat: no-repeat;

             background-size: 100% 100%;

         }

         canvas {

             position: absolute;

             left: 0;

             top: 0;

         }

     </style>

 </head>

 <body>

 <div id="wrap">

     <div></div>

     <canvas></canvas>

 </div>

 <script type="text/javascript">

     window.onload = function(){

         var canvas = document.querySelector("canvas");

         canvas.width = document.documentElement.clientWidth;

         canvas.height = document.documentElement.clientHeight;

         if(canvas.getContext){

             var ctx = canvas.getContext("2d");

             var img = new Image();

             img.src = "2.jpg";

             img.onload = function(){

                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                 canvas.addEventListener("touchstart", function(ev){

                     ev = ev || event;

                     var touchC = ev.changedTouches[0];

                     var x = touchC.clientX;

                     var y = touchC.clientY;

                     ctx.save();

                     ctx.beginPath();

                     ctx.globalCompositeOperation = "destination-out";

                     ctx.arc(x,y,25,0,360*Math.PI/180);

                     ctx.fill();

                     ctx.restore();

                 })

                 canvas.addEventListener("touchmove", function(ev){

                     ev = ev || event;

                     var touchC = ev.changedTouches[0];

                     var x = touchC.clientX;

                     var y = touchC.clientY;

                     ctx.save();

                     ctx.beginPath();

                     ctx.globalCompositeOperation = "destination-out";

                     ctx.arc(x,y,25,0,360*Math.PI/180);

                     ctx.fill();

                     ctx.restore();

                 })

             }

         }

     }

 </script>

 </body>

 </html>

底图：

效果如下：

canvas实现刮刮卡效果的更多相关文章

  1. qt qml 刮刮卡效果

    用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...

  2. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  3. 使用HTML5实现刮刮卡效果

    你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...

  4. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  5. Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

  6. Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...

  7. 【Android - 自定义View】之自定义View实现“刮刮卡”效果

    首先来介绍一下这个自定义View: (1)这个自定义View的名字叫做 GuaguakaView ,继承自View类: (2)这个View实现了很多电商项目中的“刮刮卡”的效果,即用户可以刮开覆盖层, ...

  8. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  9. HTML5 Canvas实战之刮奖效果

    近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...

随机推荐

  1. GEF中连接的实现

    在GEF绘图笔想象中复杂许多,需要很多组件的依赖与支持,稍微弄错一个引用,或一个操作调试起来就比较麻烦,下面列一下实现一个连接线功能所需要实现的类及添加的方法 建议大图查看. 相关代码:参考<G ...

  2. 使用Word 2010群发邮件

    1.建立数据库,这里我使用了excel 字段:电子邮件地址,名字 填写需要发送的数据 2.新建word文档,这里我使用了word2010 点击工具栏邮件 开始邮件合并,电子邮件 选择收件人,使用现有列 ...

  3. CV/PR:模式识别与图像处理笔试题

    汉王高级研究人员(模式识别.图像处理类)招聘试题  原文链接:http://www.cnblogs.com/dongsheng/articles/2793142.html 说明:  可能您的专业并不完 ...

  4. ObjectT5：在线随机森林-Multi-Forest-A chameleon in track in

    原文::Multi-Forest:A chameleon in tracking,CVPR2014  下的蛋...原文 使用随机森林的优势,在于可以使用GPU把每棵树分到一个流处理器里运行,容易并行化 ...

  5. open source project for recommendation system

    原文链接:http://blog.csdn.net/cserchen/article/details/14231153 目前互联网上所能找到的知名开源推荐系统(open source project ...

  6. 图像压缩Vs.压缩感知

    压缩感知科普文两则: 原文链接:http://www.cvchina.info/2010/06/08/compressed-sensing-2/ 这几天由于happyharry的辛勤劳动,大伙纷纷表示 ...

  7. QT线程使用收集示例

    关于多线程问题: Qt和Boost做跨平台的线程封装,OpenMP主要做并行计算,让不精通多线程的人也能高效地利用CPU的计算能力.个人倾向于用boost.thread, boost.mpi.   一 ...

  8. java学习笔记4——返回值

    这个简单,返回值就是计算结果. 打个比方:个表格中我只要结果,不要经过,这个返回值就是结果.这个过程就是函数. 另外还有一个函数套用一个函数,被套用的函数的结果作为一个返回值给套用的外层函使用.比如: ...

  9. 杭电2602 Bone Collector 【01背包】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 解题思路:给出一个容量为V的包,以及n个物品,每一个物品的耗费的费用记作c[i](即该物品的体积 ...

  10. centos7 redmine安装过程(转载)

    redmine 部署过程 redmin官方文档写的太烂加上不熟悉ruby搞了半天,回到家后觉得还是记录下好,希望可以帮助有需要的人,少走弯路. 版本说明 下面的版本很重要redmine 版本 3.3 ...