效果图:

代码:

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>刮刮乐</title>
  9.      <style>
  10.          .canvasBox {
  11.              width: 400px;
  12.              height: 200px;
  13.              margin: 100px auto;
  14.          }
  15.  
  16.          #canvas1 {
  17.              background-repeat: no-repeat;
  18.              background-position: center;
  19.              background-size: 300px 180px;
  20.          }
  21.      </style>
  22.  </head>
  23.  
  24.  <body>
  25.      <div class="canvasBox">
  26.          <canvas width="" height= id="canvas1"></canvas>
  27.      </div>
  28.      <script>
  29.          var oCanvas = document.getElementById('canvas1');
  30.          var ctx = oCanvas.getContext('2d');
  31.          var w = oCanvas.width;
  32.          var h = oCanvas.height;
  33.          var lastPoint = {};
  34.          var nowPoint = {};
  35.          var lastPointX, lastPointY;
  36.          var nowPointX, nowPointY;
  37.  
  38.          function init() {
  39.              ctx.fillStyle = '#ccc';
  40.              ctx.fillRect(, , w, h);
  41.  
  42.              var r = Math.random(),
  43.                  oImg = new Image();
  44.  
  45.              if (r < 0.5) {
  46.                  oImg.src = './1.png';
  47.              } else {
  48.                  oImg.src = './2.jpg';
  49.              }
  50.              oImg.onload = function () {
  51.                  oCanvas.style.backgroundImage = 'url(' + oImg.src + ')';
  52.                  ctx.globalCompositeOperation = 'destination-out';
  53.                  document.addEventListener('mousedown', downFun, false);
  54.              }
  55.          }
  56.          init();
  57.  
  58.          function downFun(e) {
  59.              lastPointX = e.clientX - oCanvas.offsetLeft;
  60.              lastPointY = e.clientY - oCanvas.offsetTop;
  61.              oCanvas.addEventListener('mousemove', moveFun, false);
  62.              document.addEventListener('mouseup', upFun, false);
  63.          }
  64.  
  65.          function moveFun(e) {
  66.              nowPointX = e.clientX - oCanvas.offsetLeft;
  67.              nowPointY = e.clientY - oCanvas.offsetTop;
  68.  
  69.              ctx.beginPath();
  70.              ctx.fillStyle = 'transpatent';
  71.  
  72.              ctx.lineWidth = ;
  73.              ctx.moveTo(lastPointX, lastPointY);
  74.              ctx.lineTo(nowPointX, nowPointY);
  75.              ctx.stroke();
  76.  
  77.              ctx.arc(nowPointX, nowPointY, , , Math.PI * , );
  78.              ctx.closePath();
  79.              ctx.fill();
  80.  
  81.              lastPointX = nowPointX;
  82.              lastPointY = nowPointY;
  83.          }
  84.  
  85.          function upFun() {
  86.              oCanvas.removeEventListener('mousemove', moveFun, false);
  87.              document.removeEventListener('mouseup', upFun, false);
  88.              clearAll();
  89.          }
  90.  
  91.          function clearAll() {
  92.              var d = ctx.getImageData(, , w, h),
  93.                  c = ,
  94.                  len = d.data.length;
  95.              for (var i = ; i < len; i += ) {
  96.                  if (d.data[i] === ) {
  97.                      c++;
  98.                  }
  99.              }
  100.              if (c > w * h * 0.7) {
  101.                  ctx.clearRect(, , w, h);
  102.              }
  103.          }
  104.      </script>
  105.  </body>
  106.  
  107.  </html>

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

  1.  ctx.lineWidth = 20;
  2.  ctx.moveTo(lastPointX, lastPointY);
  3.  ctx.lineTo(nowPointX, nowPointY);
  4.  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. JDK8 Lamdba表达式转换成Map，value为null问题

    // 将list转换成Map类型 Map<String, String> map = list.stream().collect(Collectors.toMap(Person::getI ...

  2. Thrift 使用TNonblockingServer模型时调用PosixThreadFactory出错。

    Thrift 使用TNonblockingServer模型时调用PosixThreadFactory出错.   我定位到shared_ptr<PosixThreadFactory> thr ...

  3. 51nod1256【exgcd求逆元】

    思路: 把k*M%N=1可以写成一个不定方程,(k*M)%N=(N*x+1)%N,那么就是求k*M-N*x=1,k最小,不定方程我们可以直接利用exgcd,中间还搞错了: //小小地讲一下exgcd球 ...

  4. AspectCore的AOP操作

    AOP实现缓存的一个例子 using AspectCore.DynamicProxy; using Microsoft.Extensions.Caching.Memory; [AttributeUsa ...

  5. LuoguP2657 [SCOI2009]windy数 【数位dp】By cellur925

    题目传送门 题目大意:在A和B之间,包括A和B,总共有多少个不含前导零且相邻两个数字之差至少为2的正整数? 显然是数位dp啦=w=. 显然与上一位有关,我们$dfs$的时候就要记录$pre$.因为这是 ...

  6. 远程报:这可能是由于credssp加密oracle修正

    此错误解决办法 1.Win+R 输入regedit打开注册表 找到对应的以下目录HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion ...

  7. 洛谷 P4585 [FJOI2015]火星商店问题

    (勿看,仅作笔记) bzoj权限题... https://www.luogu.org/problemnew/show/P4585 对于特殊商品,直接可持久化trie处理一下即可 剩下的,想了一段时间c ...

  8. hbuilder 中文乱码

    这是因为HBuilder默认文件编码是UTF-8,你可以在工具-选项-常规-工作空间选项中设置默认字符编码

  9. Could not open logfile" occurred when run "datapatch -verbose"

    CAUSE Due to Bug 25459405 - DATAPATCH FAILS WITH SP2-0768 IF NLS_LANGUAGE IS NOT SET TO AMERICANwhic ...

  10. Python Selenium设计模式 - PO设计模式

    整理一下python selenium自动化测试实践中使用较多的po设计模式. 为什么要用PO 基于python selenium2开始开始ui自动化测试脚本的编写不是多么艰巨的任务.只需要定位到元素 ...