在解決問題前，我們先來了解一下 canvas 標籤
canvas 是 html5 出現的新標籤，像所有的 dom 物件一樣它有自己本身的屬性、方法和事件，其中就有繪圖的方法，js 能夠呼叫它來進行繪圖。
context是乙個封裝了很多繪圖功能的物件，獲取這個物件的方法是 :
var canvas = document.queryselector('canvas');
var ctx = canvas.getcontext("2d");12
3canvas元素繪製影象的時候有兩種方法，分別是:
ctx.fill()//填充
ctx.stroke()//繪製邊框12
style:在進行圖形繪製前，要設定好繪圖的樣式
ctx.fillstyle()//填充的樣式
ctx.strokestyle()//邊框樣式12
ctx.fillrect(x, y, width, height)
繪製乙個填充的矩形
ctx.clearrect(x, y, width, height)
清除指定矩形區域，讓清除部分完全透明。
ctx.beginpath()
新建一條路徑，生成之後，圖形繪製命令被指向到路徑上生成路徑。
ctx.closepath()
閉合路徑之後圖形繪製命令又重新指向到上下文中。
ctx.stroke()
通過線條來繪製圖形輪廓。
ctx.fill()
通過填充路徑的內容區域生成實心的圖形。
ctx.fill();與ctx. stroke()是對應的，一種是填充，一種是描線
ctx.arc()
畫圓弧，有五個引數（x, y, 半徑, 起始角度，結束角度，是否逆時針）
ctx.arc(75,75,50,0,math.pi*2,true); // 繪製圓
ctx.arc(75,75,35,0,math.pi,false); // 口(順時針)半圓12
更多屬性詳情這裡。
**實現
實現原理
首先，我們要禁用頁面的滑鼠選中拖動的事件，就是不執行執行選中操作。
var bodystyle = document.body.style;
bodystyle.mozuserselect = 'none';
bodystyle.webkituserselect = 'none';
接著我們定義類，獲取canvas元素，並設定背景和位置屬性。我們在本例中用到兩張隨機**，每次重新整理隨機一張作為背景。
監聽載入事件，定義gray顏色。
監聽滑鼠事件並畫出影象。
js **如下：
刮開灰色部分看看，再來一次12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
2930
3132
3334
3536
3738
3940
4142
4344
4546
4748
4950
5152
5354
5556
5758
5960
6162
6364
6566
6768
6970
7172
7374
7576
7778
7980
8182
8384
8586
87專案demo這裡。
在這裡再拓展乙個canvas畫圖的例項——頁面時鐘
詳細的解釋在文中已有注釋。
js**如下：
刮刮樂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實現刮刮樂的效果
很多 上都有刮刮樂的效果，這個呢，也不是很完善，大神們可以多提提意見喲！豌豆拜上 lang en charset utf 8 title canvas style head width 300 height 300 canvas src script var canvas document.quer...
總結canvas刮刮樂遊戲
1.刮了圖層後顯示隨機的背景圖，設計滑鼠抬起移動放下事件 2.利用新舊畫素合併的時候被擦掉 ctx.globalcompositeoperation destination out 3.快速移動會出現斷點，那就直接讓兩邊落下的地方連成線 4.利用getimagedata這個方法獲得裡面的data，d...