本篇文章為大家展示了HTML5 中怎么利用canvas標簽實現(xiàn)刮刮卡效果，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為霍林郭勒企業(yè)提供專業(yè)的成都網(wǎng)站制作、做網(wǎng)站，霍林郭勒網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

HTML

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

代碼如下:

Javascript

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

代碼如下:

var bodyStyle = document.body.style;
bodyStyle.mozUserSelect = 'none';
bodyStyle.webkitUserSelect = 'none';

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

代碼如下:

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];

然后進入主體，當檢測到圖片加載完的時候，首先定義一些屬性和函數(shù)，函數(shù)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調(diào)用以上函數(shù)，繪制圖形，并且偵聽觸控及鼠標事件，調(diào)用相應(yīng)的函數(shù)，請看代碼：

代碼如下:

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);

上述內(nèi)容就是HTML5 中怎么利用canvas標簽實現(xiàn)刮刮卡效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：HTML5中怎么利用canvas標簽實現(xiàn)刮刮卡效果-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/dcccij.html