canvas實現刮刮樂的效果

很多**上都有刮刮樂的效果，這個呢，也不是很完善，大神們可以多提提意見喲！！豌豆拜上

lang="en">

charset="utf-8">
title>
canvas
style>
head>
width="300"
height="300">
canvas>
src="">
script>
var canvas=document.queryselector('canvas');
var ctx=canvas.getcontext('2d');
//邏輯部分
//1.畫出乙個與畫布一樣大小的填充矩形
ctx.fillstyle='#c1c1c1';
ctx.fillrect(0,0,300,300);
//當繪製兩個圖形的時候，兩個影象有相交的部分時，顯示舊圖形與新圖形不想交的部分
ctx.globalcompositeoperation='destination-out';
//2.滑鼠按下並移動的時候以滑鼠經過的點為圓心劃圓
$('canvas').on('mousedown',function
() }
當sum中的數值超過畫布中畫素點的一半時，清除整個畫布中的矩形，並且解除事件處理程式
if(sum>=canvas.width*canvas.height/2)
})}).on('mouseup',function
());
script>
body>
html>

效果就是這個樣子了，隨便貼了一張圖，哈哈

刮刮樂原圖：

刮刮樂canvas實現

class scratch config this.movenum 0 this.clearrange clearrange 2 this.canvasid canvasid this.radius radius 25 this.canvas this.canvasid this.ifend fal...

canvas 實現刮刮樂

在解決問題前，我們先來了解一下 canvas 標籤 canvas 是 html5 出現的新標籤，像所有的 dom 物件一樣它有自己本身的屬性 方法和事件，其中就有繪圖的方法，js 能夠呼叫它來進行繪圖。context是乙個封裝了很多繪圖功能的物件，獲取這個物件的方法是 var canvas docu...

微信小程式 canvas實現刮刮樂效果

canvas設定背景圖，作為中獎 在canvas上繪製刮的灰色塗層 通過繫結的事件，清除對應區域的塗層 最後判斷塗層清除區域是否超過設定的可見百分比，如果超過則全部塗層清除，否則不清楚。獲取使用者傳入的canvas的id，設定的canvas的寬高，canvas塗層的顏色，清除當前座標的半徑和直徑，計...