HTML5 canvas標簽實現刮刮卡效果

你玩過刮刮卡么？一不小心可以中獎的那種。今天我給大家分享一個基于HTML5技術實現的刮刮卡效果，在PC上只需按住鼠標，在手機上你只需按住指頭，輕輕刮去圖層就可以模擬真實的刮獎效果。

源碼下載：

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

HTML

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