HTML5中canvas標籤實現刮刮卡效果

你玩過刮刮卡麼？一不小心可以中獎的那種。今天我給大家分享一個基於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();

}

}

}

//...

});