效果图:

代码:

 <!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. Android 用Animation-list实现逐帧动画 （转载）

    转自:http://blog.csdn.net/aminfo/article/details/7847761 第一步:先上图片素材,以下素材放到res/drawable目录下: http://blog ...

  2. 腾讯QQ团队开源分布式后台毫秒服务引擎全解析：引擎架构、RPC、灰度……

    腾讯QQ团队将于12月4日开源一个服务开发运营框架,叫做毫秒服务引擎(Mass Service Engine in Cluster,MSEC),它集RPC.名字发现服务.负载均衡.业务监控.灰度发布. ...

  3. UITableViewCell添加点击时改变字体的颜色、背景、图标

    改变字体颜色:cell.textLabel.highlightedTextColor 改变背景颜色:cell.selectedBackgroundView (必须是图片哦) 改变图标颜色:cell.i ...

  4. oracle 表空间及查看所有用户的表空间

    用户有默认表空间,但是只能指定一个,但是你有其它表空间的限额的话,可以将表建到其它表空间中. 语法 create table xxx(xxxx xx) tablespace xxxxx 1.查看当前用 ...

  5. 浅谈web前端性能优化

    前端性能优化: 一.尽可能减少前端http请求. 1.合并优化脚本文件和css文件. 2.同种类型的背景图片尽量放在一起,用css控制显示. 二.使用浏览器缓存. 如果能强制浏览器缓存在本地,将会降低 ...

  6. [NewTrain 10][poj 2329]Nearest Number - 2

    题面: http://poj.org/problem?id=2329 题解: 这题有很多做法 1. 搜索 复杂度$O(n^4)$ 但是实际上远远达不到这个复杂度 所以可以通过 2. 对于每一个格子,我 ...

  7. WOJ1109 奶牛排队

    题目链接: WOJ1109 题目描述: 奶牛在熊大妈的带领下排成了一条直队. 显然,不同的奶牛身高不一定相同-- 现在,奶牛们想知道,如果找出一些连续的奶牛,要求最左边的奶牛A是最矮的,最右边的B是最 ...

  8. 洛谷p2234/BZOJ1588 [HNOI2002]营业额统计

    题目链接: 洛谷 BZOJ 分析: 好像没有什么好说的就是一个平衡树的板子--唯一要注意的就是这里要找的并不是严格的前驱和后继,因为如果找到之前某一天的营业额和它相等那么差就是0,所以我们仍然在结构体 ...

  9. JSP与Servlet的编解码

    一.java web中涉及编解码的地方 (1)浏览器端向后台发起请求时:URL.Cookie.Parameter: (2)后台响应返回数据时:页面编码,数据库数据编码:

  10. iOS常用第三方库 -转

    转自 http://www.cnblogs.com/jukaiit/p/4956419.html 1.AFNetworking 轻量级的通讯类库,使用非常简单. 下载地址:https://github ...