效果图:

代码:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

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

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>刮刮乐</title>

     <style>

         .canvasBox {

             width: 400px;

             height: 200px;

             margin: 100px auto;

         }

         #canvas1 {

             background-repeat: no-repeat;

             background-position: center;

             background-size: 300px 180px;

         }

     </style>

 </head>

 <body>

     <div class="canvasBox">

         <canvas width="" height= id="canvas1"></canvas>

     </div>

     <script>

         var oCanvas = document.getElementById('canvas1');

         var ctx = oCanvas.getContext('2d');

         var w = oCanvas.width;

         var h = oCanvas.height;

         var lastPoint = {};

         var nowPoint = {};

         var lastPointX, lastPointY;

         var nowPointX, nowPointY;

         function init() {

             ctx.fillStyle = '#ccc';

             ctx.fillRect(, , w, h);

             var r = Math.random(),

                 oImg = new Image();

             if (r < 0.5) {

                 oImg.src = './1.png';

             } else {

                 oImg.src = './2.jpg';

             }

             oImg.onload = function () {

                 oCanvas.style.backgroundImage = 'url(' + oImg.src + ')';

                 ctx.globalCompositeOperation = 'destination-out';

                 document.addEventListener('mousedown', downFun, false);

             }

         }

         init();

         function downFun(e) {

             lastPointX = e.clientX - oCanvas.offsetLeft;

             lastPointY = e.clientY - oCanvas.offsetTop;

             oCanvas.addEventListener('mousemove', moveFun, false);

             document.addEventListener('mouseup', upFun, false);

         }

         function moveFun(e) {

             nowPointX = e.clientX - oCanvas.offsetLeft;

             nowPointY = e.clientY - oCanvas.offsetTop;

             ctx.beginPath();

             ctx.fillStyle = 'transpatent';

             ctx.lineWidth = ;

             ctx.moveTo(lastPointX, lastPointY);

             ctx.lineTo(nowPointX, nowPointY);

             ctx.stroke();

             ctx.arc(nowPointX, nowPointY, , , Math.PI * , );

             ctx.closePath();

             ctx.fill();

             lastPointX = nowPointX;

             lastPointY = nowPointY;

         }

         function upFun() {

             oCanvas.removeEventListener('mousemove', moveFun, false);

             document.removeEventListener('mouseup', upFun, false);

             clearAll();

         }

         function clearAll() {

             var d = ctx.getImageData(, , w, h),

                 c = ,

                 len = d.data.length;

             for (var i = ; i < len; i += ) {

                 if (d.data[i] === ) {

                     c++;

                 }

             }

             if (c > w * h * 0.7) {

                 ctx.clearRect(, , w, h);

             }

         }

     </script>

 </body>

 </html>

一开始鼠标滑动太快会导致两点之间产生空白,后面通过记录鼠标移动前后两点的位置,使用stroke画线即可

 ctx.lineWidth = 20;

 ctx.moveTo(lastPointX, lastPointY);

 ctx.lineTo(nowPointX, nowPointY);

 ctx.stroke();
当刮开一定的面积时就自动全部展示出来

canvas之刮刮乐的更多相关文章

  1. 游戏的套路你知道吗？ H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  2. H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  3. canvas刮刮乐

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  4. 【Android界面实现】使用Canvas对象实现“刮刮乐”效果

    在淘宝.京东等电商举办活动的时候,常常能够看到在移动client推出的各种刮奖活动,而这样的活动也受到了非常多人的喜爱.从client的体验来说,这样的效果应该是通过网页来实现的,那么,我们使用And ...

  5. HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  6. canvas刮刮乐游戏等

    裁剪 ctx.clip():当前路径外的区域不再绘制 <canvas id="cans" width=500 height=500></canvas> &l ...

  7. canvas 写一个刮刮乐抽奖

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  9. canvas刮刮乐效果（pc端&H5、zepto-touchmove）

    一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;&quo ...

随机推荐

  1. 洛谷 - P2598 - 狼和羊的故事 - 最大流

    https://www.luogu.org/problemnew/show/P2598 第一次写这种修篱笆的题目,上次好像晓阳dalao写了一个堵人的.好像还有能改变土地属性的. #include&l ...

  2. hdoj1106

    果然...这种一条字符串的处理,还是不熟练,居然wa了四次--. 预处理预处理!!!!: 然后中间对条件的确定,标记的改变+预处理,不够严谨啊!!! #include<cstdio> #i ...

  3. bzoj 1874: [BeiJing2009 WinterCamp]取石子游戏【博弈论】

    先预处理出来sg值,然后先手必败状态就是sg[a[i]]的xor和为0(nim) 如果xor和不为0,那么一定有办法通过一步让xor和为0,具体就是选一个最大的sg[a[i]],把它去成其他sg值的x ...

  4. childNodes和Children的区别

    1.childNodes: 标准的,返回指定元素的子元素集合,包括HTML属性,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点 ...

  5. iOS [CIContext initWithOptions:]: unrecognized selector sent to instance 模拟器 iOS 8.4

    在模拟器(iPhone 4s,iOS 8.4)中运行应用时, 应用crash在了使用CIContext(options:nil) 这个API的一个纯Swift第三方库. StackOverFlow的解 ...

  6. AtCoder Grand Contest 017 A

    Problem Statement There are N bags of biscuits. The i-th bag contains Ai biscuits. Takaki will selec ...

  7. JSP九大内置对象的作用和用法总结【转】

    JSP九大内置对象的作用和用法总结?     JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.c ...

  8. 学JAVA第二十四天，Set集合与StringBuilder

    下面的内容需要慢慢看,因为,我的语言表达能力不是很好 首先说Set把,Set集合是一个无序且不允许重复的集合,而且查找效率也是快的可怕的. 但是,有些时候,我们必须要用储存多个相同的值时,Set也是可 ...

  9. 01认识Python和基础知识

     1.了解Python Python的发展历史,作者Guido, 荷兰人 Python的优缺点 Python在网站的开发,如YouTube,科学计算,数据分析,在游戏后台开发等方面广泛使用  2.编写 ...

  10. ios 苹果原生系统定位 CLLocationManager

    首先要干这些事 下面的方法亲测可用 ------------------------------------------------------------ DNLogFUNC //初始化位置管理对象 ...