用 Canvas 制作刮刮卡 

<!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>
    .container{
      margin: 10px auto 20px auto;
      min-height: 300px;
    }
  </style>
</head>
<body>
  <div class="container">
    <canvas></canvas>
  </div>
  <script>
    var img=new Image();                                                //实例化一个图片类
    var canvas=document.querySelector('canvas');                        //拿到canvas的DOM对象
    canvas.style.backgroundColor="transparent";                         //canvas的背景为透明
    canvas.style.position="absolute";                                   //canvas的定位方式为绝对定位
    var imgs=['1.png','2.png'];                                         //中奖和未中奖两张图片
    var num=Math.floor(Math.random()*2);                                //随机生成0和1
    img.src=imgs[num];                                                  //图片的实例对象设置图片url
    
    img.addEventListener('load',function(e){
      var ctx;
      var w=img.width,                                                  //获取图片宽度
          h=img.height;                                                 //获取图片高度
      var offsetX = canvas.offsetLeft,                                  //获取canvas 相对于左边界的偏移
          offsetY = canvas.offsetTop;                                   //获取canvas 相对于上边界的偏移
      var mousedown=false;                                              //防止手势操作滑出手机边界

      function layer(ctx){                                              //绘制蒙层
        ctx.fillStyle="gray";                                           //蒙层颜色
        ctx.fillRect(0,0,w,h);                                          //蒙层的位置和大小
      }
      function eventDown(e){                                            // 鼠标或手势按下触发的事件回调
        e.preventDefault();
        mousedown=true;
      }
      function eventUp(e){                                              //鼠标或者手势松开时触发的事件回调
        e.preventDefault();
        mousedown=false;
      }
      function eventMove(e){
        e.preventDefault();
        if(mousedown){
          if(e.changedTouches){                                         //拿到TouchList对象中最后一个事件对象
            e=e.changedTouches[e.changedTouches.length-1];
          }
          var x=(e.clientX+document.body.scrollLeft || e.pageX) - offsetX || 0;
          var y=(e.clientY+document.body.scrollTop  || e.pageY) - offsetY || 0;
          ctx.beginPath();                                              //创建一个新路径
          ctx.arc(x,y,3,0,Math.PI*2);                                  //绘制弧线
          ctx.fill();                                                   //填充路径
        }
      };


      canvas.width=w;                                                   //设置宽度啊
      canvas.height=h;                                                  //设置高度
      canvas.style.backgroundImage='url('+img.src+')'                   //设置背景
      ctx=canvas.getContext('2d');                                      //返回canvas上下文
      ctx.fillStyle='transparent';                                      //填充背景色为透明
      ctx.fillRect(0,0,w,h);                                            //填充的位置和长度
      layer(ctx);                                                       //绘制蒙层
      ctx.globalCompositeOperation='destination-out';                   //路径与原图像重叠部分透明
      canvas.addEventListener('touchstart',eventDown);
      canvas.addEventListener('touchend',eventUp);
      canvas.addEventListener('touchmove',eventMove);
      canvas.addEventListener('mousedown',eventDown);
      canvas.addEventListener('mouseup',eventUp);
      canvas.addEventListener('mousemove',eventMove);
    })
  </script>
</body>
</html>

 

posted @ 2019-04-04 17:08  伴月阁  阅读(440)  评论(0)    收藏  举报