h5canvas实现刮刮乐效果代码

canvas实现刮刮乐主要是要注意两个地方:第一个是将绘制的图形设置成背景图片（用到toDataURL属性），这样在擦覆盖层的时候才不会丢失绘制的图案，

第二个是设置在绘制插图的时候，设置透明透明（用到globalCompositeOperation属性）

代码如下：

<script>      var arr=[          {name:"iphone7 磨砂黑",color:"rgba(255,255,0,1)"},          {name:"iphone7 磨砂黑",color:"rgba(0,255,0,.9)"},          {name:"iphone7 磨砂黑",color:"rgba(10,255,255,1)"},          {name:"iphone7 磨砂黑",color:"rgba(10,255,100,1)"}      ]      var r=Math.random();      var rIndex= Math.floor(r*arr.length);      var rPrice=arr[rIndex];      var cv=document.getElementsByTagName('canvas')[0];      var isDown=false;      cv.height=400;      cv.width=600;      var ctx=cv.getContext("2d");      function toAngle(radian){          return radian/Math.PI*180;      }      function toRadian(angle){          return angle/180*Math.PI;      }      ctx.textAlign="center";      ctx.textBaseline="middle";      ctx.font="30px consolas";      ctx.fillStyle=rPrice.color;      ctx.fillText(rPrice.name,cv.width/2,cv.height/2);        var dataURL=cv.toDataURL("image/jpg",1);      cv.style.background="url("+dataURL+")";        //覆盖层      ctx.beginPath();      ctx.fillStyle="#eee";      ctx.fillRect(0,0,cv.width,cv.height);        cv.addEventListener("mousedown",function(){          isDown=true;      })      cv.addEventListener("mouseup",function(){          isDown=false;          ctx.globalCompositeOperation="source-out"      })      cv.addEventListener("mousemove",function(e){          if (isDown){              ctx.globalCompositeOperation="destination-out";              ctx.beginPath();              var posObj=cv.getBoundingClientRect();                var left=posObj.left;              var top=posObj.top;                var x= e.clientX-left;              var y= e.clientY-top;                ctx.arc(x,y,50,0,Math.PI*2);              ctx.fill();          }      })  </script>

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程