html如何實現刮刮卡效果

這篇文章將為大家詳細講解有關html如何實現刮刮卡效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　使用HTML5實現刮刮卡效果

　　查看演示下載源碼

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

　　HTML

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

　　<canvas></canvas>

　　Javascript

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

　　varbodyStyle=document.body.style;

　　bodyStyle.mozUserSelect='none';

　　bodyStyle.webkitUserSelect='none';

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

　　HTML5實現刮刮卡代碼

　　varimg=newImage();

　　varcanvas=document.querySelector('canvas');

　　canvas.style.backgroundColor='transparent';

　　canvas.style.position='absolute';

　　varimgs=['p_0.jpg','p_1.jpg'];

　　varnum=Math.floor(Math.random()*2);

　　img.src=imgs[num];

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

關于“html如何實現刮刮卡效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。