HTML5 中怎么利用canvas標簽實現刮刮卡效果

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

HTML

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

代碼如下:

<canvas></canvas>

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

上述內容就是HTML5 中怎么利用canvas標簽實現刮刮卡效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。