效果图:

代码:

 <!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. 878. Nth Magical Number

    A positive integer is magical if it is divisible by either A or B. Return the N-th magical number.  ...

  2. poj1338【丑数·DP】

    我记得这道题以前写过,而且是写出来了.DP吧. 然后现在想了好久...没想出来.... 然后考虑一下递推..mdzz-直接就是让之前的这个每次乘以2,3,5就好了嘛,然后每轮取最小. //#inclu ...

  3. bzoj 3811: 玛里苟斯【线性基+期望dp】

    这个输出可是有点恶心啊--WA*inf,最后抄了别人的输出方法orz 还有注意会爆long long,要开unsigned long long 对于k==1,单独考虑每一位i,如果这一位为1则有0.5 ...

  4. locate的基本用法

    一.工作原理 1. locate是通过读取一个或多个由updatedb命令生成的数据库来查找文件的,而updatedb由计划任务程序cron每天运行来更新缺省的数据库(/var/lib/mlocate ...

  5. IT兄弟连 JavaWeb教程 Servlet 状态管理 会话跟踪

    HTTP协议是无状态的,我们的客户端与服务器的每一次请求与响应,我们服务器都没有记忆能力将客户端与服务器的多次交互数据进行存储与管理共有两种技术实现: ●  基于客户端实现:Cookie,将状态保存在 ...

  6. IT兄弟连 ElasticSearch在Linux下的安装和启动、常见问题解决

    环境要求 ·      Linux(Centos 7) ·      ElasticSerach 6.6.1 ES下载 ·      下载地址:https://www.elastic.co/cn/do ...

  7. Log2Net的架构简介

    在开始介绍源码之前,我们有必要了解下整个系统的大致需求,设计架构,观其大略,这样才能从总体上把握为何细节上要如此设计,不至于在代码的海洋中迷失,时不时吐槽为何要这么多代码.高屋建瓴地把控系统的全局,孜 ...

  8. SPFA/Dijkstra POJ 3013 Big Christmas Tree

    题目传送门 题意:找一棵树使得造价最少,造价为每个点的子节点造价和*边的造价和 分析:最短路跑出1根节点到每个点的最短边权值,然后每个点的权值*最短边距和就是答案,注意INF开足够大,n<=1特 ...

  9. 转-eclipse管理多个workspace

    Eclipse作为Java开发中最常用的开发工具,大家都很熟悉了,但是,当你做过很多项目后你会发现你的eclipse的package explorer视图下显示的project超级多,这时你可能会关闭 ...

  10. Bootstrap中的datetimepicker浅谈

    从古至今,人们都习惯用某个时间来标记某个事件的发生.我们在写管理后台的时候,重中之中也是这个时间的设置.在问题出现的时候,我们是查看日志的时候,就可以根据这个时间段来查找这个问题出现点. 在使用时间控 ...