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視頻教程