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線上影片教學
#以上是h5canvas實現刮刮樂效果代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!