你的位置:首页 > 网页设计

[网页设计]canvas刮奖效果

上次写刮奖效果都一年前了,那时候还是百度找的源码给改的,自己其实也是迷迷糊糊的,这次因为让妹子写,然后想着自己也重新整理下。

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <title>刮奖效果</title>  <style type="text/css">  #canvas{    display: block;    margin:0 auto;  }  </style></head><body>  <canvas id="canvas"></canvas>  <script type="text/javascript">  // 初始化,设置canva的宽(width)、高(height),涂抹画笔的直径(r),背景图片(img)(即底层的图片),上层遮罩层  var width=440;  var height=440;  var r=20;  var img = new Image();  img.src="1.jpg";  var canvas=document.getElementById("canvas");  canvas.style.backgroundImage='url('+img.src+')';  canvas.width=width;  canvas.height=height;  var ctx=canvas.getContext("2d");  ctx.fillStyle="#ccc";  ctx.fillRect(0,0,width,height);          //绘制上层的涂层  ctx.globalCompositeOperation="destination-out";  //在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。  var isMove=false;  var el=new Array();  el.x=canvas.offsetLeft;  el.y=canvas.offsetTop;  /************************************  方式一:利用arc来模拟两端圆角的直线  ***********************************/  //按下时  function touchStart(e){    e.preventDefault();    isMove=true;    ctx.closePath();  }  // 移动时  function touchMove(e){    e.preventDefault();    var x,y;    if(isMove){      if(e.targetTouches){          //移动端        var touch=e.targetTouches[0];        x=touch.clientX-el.x;        //坐标矫正        y=touch.clientY-el.y;      }else{                  //pc端        x=e.pageX-el.x;        y=e.pageY-el.y;      }      ctx.beginPath();      ctx.arc(x,y,r,0,Math.PI*2);        //绘制笔触      ctx.fill();      ctx.closePath();            //每次闭合路径    }  }  // 离开时  function touchEnd(e){    e.preventDefault();    isMove=false ;    ctx.closePath();    //涂抹区域百分比    var imgData=ctx.getImageData(0,0,width,height);//返回ImageData对象,该对象拷贝画布指定的像素数据    var pixles=imgData.data;    var transNum=0;    //rgba以数组形式储存在imageData中,    // r=imgData.data[0];    // g=imgData.data[1];    // b=imgData.data[2];    // a=imgData.data[3];    for(var i=3,j=pixles.length;i<j;i+=4){      var a=pixles[i];      if(a==0){        transNum++      }    }    var transPercent=transNum/(pixles.length/4);//透明度比    console.log(transPercent);    //超过某个值显示所有    if(transPercent>0.5){      ctx.fillRect(0,0,width,height);    }  }  /**************************************************************************  方式二:ctx.lineTo(x,y)来画直线,用ctx.lineCap="round";来设置直线两端的圆角  当滑的很快的时候,这种效果比第一种好  ***************************************************************************/  //按下时  // function touchStart(e){  //   e.preventDefault();  //   isMove=true;  //   var x,y;  //   if(e.targetTouches){          //移动端  //     var touch=e.targetTouches[0];  //     x=touch.clientX-el.x;  //     y=touch.clientY-el.y;  //   }else{                  //pc端  //     x=touch.clientX-el.x;  //     y=touch.clientY-el.y;  //   }  //   ctx.beginPath();  //   ctx.lineCap="round";  //   ctx.lineJoin="round";  //   ctx.lineWidth=r;  //   ctx.moveTo(x,y);  // }  // // 移动时  // function touchMove(e){  //   e.preventDefault();  //   var x,y;  //   if(isMove){  //     if(e.targetTouches){          //移动端  //       var touch=e.targetTouches[0];  //       x=touch.clientX;  //       y=touch.clientY;  //     }else{                  //pc端  //       x=e.pageX;  //       y=e.pageY;  //     }  //     ctx.lineTo(x,y);            //绘制笔触  //     ctx.stroke();  //   }  // }  // // 离开时  // function touchEnd(e){  //   e.preventDefault();  //   isMove=false ;  //   ctx.closePath();  // }  // 事件监听  canvas.addEventListener("touchstart",touchStart);  canvas.addEventListener("mousedown",touchStart);  canvas.addEventListener("touchmove",touchMove);  canvas.addEventListener("mousemove",touchMove);  canvas.addEventListener("touchend",touchEnd);  canvas.addEventListener("mouseup",touchEnd);  </script></body></html>