我們利用HTML5的畫布Canvas，結合其提供的API，在Canvas元素上繪制一個灰色蒙層，然后通過檢測用戶鼠標移到和手勢來繪制一個透明的圖形，這樣就能看到Canvas背景下的真實圖片，就達到刮刮卡效果。

HTML

我們只需要在頁面中加入canvas標簽元素，其他的就看javascript的了。注意canvas元素是HTML5才有的元素，運行在支持HTML5的現代瀏覽器上。

Javascript

首先，我們要禁用頁面的鼠標選中拖動的事件，就是不運行執行選中操作。

var?bodyStyle?=?document.body.style;

bodyStyle.mozUserSelect?=?'none';

bodyStyle.webkitUserSelect?=?'none';

接著我們定義圖片類，獲取canvas元素，并設置背景和位置屬性。我們在本例中用到兩張隨機照片，每次刷新隨機一張圖片作為背景。

var?img?=?new?Image();

var?canvas?=?document.querySelector('canvas');

canvas.style.backgroundColor='transparent';

canvas.style.position?=?'absolute';

var?imgs?=?['p_0.jpg','p_1.jpg'];

var?num?=?Math.floor(Math.random()*2);

img.src?=?imgs[num];

然后進入主體，當檢測到圖片加載完的時候，首先定義一些屬性和函數，函數layer()用來繪制一個灰色的正方形，eventDown()定義了按下事件eventUp()定義了松開事件，eventMove()定義了移動事件，其中當按下時，獲取坐標位移，并通過arc(x, y, 10, 0, Math.PI * 2)來繪制小圓點。

img.addEventListener('load',?function(e)?{

var?ctx;

var?w?=?img.width,

h?=?img.height;

var?offsetX?=?canvas.offsetLeft,

offsetY?=?canvas.offsetTop;

var?mousedown?=?false;

function?layer(ctx)?{

ctx.fillStyle?=?'gray';

ctx.fillRect(0,?0,?w,?h);

}

function?eventDown(e){

e.preventDefault();

mousedown=true;

}

function?eventUp(e){

e.preventDefault();

mousedown=false;

}

function?eventMove(e){

e.preventDefault();

if(mousedown)?{

if(e.changedTouches){

e=e.changedTouches[e.changedTouches.length-1];

}

var?x?=?(e.clientX?+?document.body.scrollLeft?||?e.pageX)?-?offsetX?||?0,

y?=?(e.clientY?+?document.body.scrollTop?||?e.pageY)?-?offsetY?||?0;

with(ctx)?{

beginPath()

arc(x,?y,?10,?0,?Math.PI?*?2);//繪制圓點

fill();

}

}

}

//...

});

最后，通過canvas調用以上函數，繪制圖形，并且偵聽觸控及鼠標事件，調用相應的函數，請看代碼：

img.addEventListener('load',?function(e)?{

//..接上段代碼

canvas.width=w;

canvas.height=h;

canvas.style.backgroundImage='url('+img.src+')';

ctx=canvas.getContext('2d');

ctx.fillStyle='transparent';

ctx.fillRect(0,?0,?w,?h);//繪制矩形

layer(ctx);

ctx.globalCompositeOperation?=?'destination-out';

canvas.addEventListener('touchstart',?eventDown);

canvas.addEventListener('touchend',?eventUp);

canvas.addEventListener('touchmove',?eventMove);

canvas.addEventListener('mousedown',?eventDown);

canvas.addEventListener('mouseup',?eventUp);

canvas.addEventListener('mousemove',?eventMove);

你可以下載DEMO中的完整的代碼，你可以根據實際需求，結合后臺程序與數據庫，完成一個真正的刮刮卡程序。

總結

以上是生活随笔為你收集整理的html制作花样链接卡页面_使用HTML5实现刮刮卡效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。