你玩過刮刮卡麼？一不小心可以中獎的那種。今天我給大家分享一個基於HTML5技術實現的刮刮卡效果，在PC上只需按住滑鼠，在手機上你只需按住指頭，輕輕颳去圖層就可以模擬真實的刮獎效果。
我們利用HTML5的畫布Canvas，結合其提供的API，在Canvas元素上繪製一個灰色蒙層，然後通過檢測使用者滑鼠移到和手勢來繪製一個透明的圖形，這樣就能看到Canvas背景下的`真實圖片，就達到刮刮卡效果。
HTML
我們只需要在頁面中加入canvas標籤元素，其他的就看javascript的了。注意canvas元素是HTML5才有的元素，執行在支援HTML5的現代瀏覽器上。
程式碼如下:
<canvas></canvas>
Javascript
首先，我們要禁用頁面的滑鼠選中拖動的事件，就是不執行執行選中操作。
程式碼如下:
var bodyStyle = e;
serSelect = 'none';
itUserSelect = 'none';
接著我們定義圖片類，獲取canvas元素，並設定背景和位置屬性。我們在本例中用到兩張隨機照片，每次重新整理隨機一張圖片作為背景。
程式碼如下:
var img = new Image();
var canvas = ySelector('canvas');
groundColor='transparent';
tion = 'absolute';
var imgs = ['p_0.jpg','p_1.jpg'];
var num = r(om()*2);
= imgs[num];
然後進入主體，當檢測到圖片載入完的時候，首先定義一些屬性和函式，函式layer()用來繪製一個灰色的正方形，eventDown()定義了按下事件eventUp()定義了鬆開事件，eventMove()定義了移動事件，其中當按下時，獲取座標位移，並通過arc(x, y, 10, 0, * 2)來繪製小圓點。
程式碼如下:
ventListener('load', function(e) {
var ctx;
var w = h,
h = ht;
var offsetX = etLeft,
offsetY = etTop;
var mousedown = false;
function layer(ctx) {
Style = 'gray';
Rect(0, 0, w, h);
}
function eventDown(e){
entDefault();
mousedown=true;
}
function eventUp(e){
entDefault();
mousedown=false;
}
function eventMove(e){
entDefault();
if(mousedown) {
if(gedTouches){
e=gedTouches[th-1];
}
var x = (ntX + llLeft || X) - offsetX || 0,
y = (ntY + llTop || Y) - offsetY || 0;
with(ctx) {
beginPath()
arc(x, y, 10, 0, * 2);//繪製圓點
fill();
}
}
}
//...
});
學識谷
