效果图:

代码:

 <!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. POJ1270【拓扑排序+DFS】

    题意: 先给你一个字符串,让你给他们排序: 再给你一行,在这一行,每两个就是第一个需要在第二个前面: 思路: //DFS写多了感觉好有啊,就是排序过程中可能会有多种情况. //我们考虑一下怎么排好一个 ...

  2. eclipse中alt+/的作用

    一般情况下alt+/有代码提示作用,还有代码提示的快捷代码也不是alt+/,因此要恢复代码提示用alt+/.需要做两件事.在 Window - Preferences - General - Keys ...

  3. Tomcat | 修改默认端口

    Tomcat安装目录下 conf 目录下 server.xml 找到 <Connector connectionTimeout="/> 修改其中port值即可

  4. win32 指令大全

    指令类型 助记符 (带*为特权指令) 对标志寄存器的影响 备注 说明 举例 ZF CF PF SF OF AF DF IF TF 数据传送类 数据传送 MOV 不影响标志位 Move MOV r/m3 ...

  5. LightOj 1076 - Get the Containers (折半枚举好题)

    题目链接: http://www.lightoj.com/volume_showproblem.php?problem=1076 题目描述: 给出n个数,要求分成m段,问这m段中最大的总和,最小是多少 ...

  6. Reduce实现

    Reduce实现 参考 第一版 Array.prototype.fakeReduce = function (fn, base) { // this 指向原数组 // 拷贝数据, 更改指针方向 var ...

  7. solrJ的使用--覆盖创建索引，查询，删除索引【转自http://blog.sina.com.cn/s/blog_64ac3ab10100t3mq.html】

    package com.xzhe.common.search; import java.util.ArrayList; import java.util.Collection; import java ...

  8. js的本质、全局属性

    一.js的本质 1.js的本质就是处理数据, 数据来自于后台数据库, 所以变量就起到一个临时数据的作用 Ecmascript 制定了js的数据类型 2.数据类型有哪些? 字符串(string).数字( ...

  9. Pow挖矿流程

    Pow挖矿流程 POW即工作量的证明,主要特征是客户端需要做一定难度的工作得出一个结果,验证方却很容易通过结果来检查出客户端是不是做了相应的工作. Pow挖矿即不断接入新的Block延续Block C ...

  10. 工作中Git使用笔记

    git相关说明. //git 安装$ git config --global user.name "xxx"代码提交时的用户名,与GITLAB注册用户名建议保持一致$ git co ...