你玩過刮刮卡麼？一不小心可以中獎的那種。今天我給大家分享一個基於HTML5技術實現的刮刮卡效果，在PC上只需按住鼠標，在手機上你只需按住指頭，輕輕刮去圖層就可以模擬真實的刮獎效果。
我們利用HTML5的畫布Canvas，結合其提供的API，在Canvas元素上繪製一個灰色蒙層，然後通過檢測用戶鼠標移到和手勢來繪製一個透明的圖形，這樣就能看到Canvas背景下的真實圖片，就達到刮刮卡效果。
HTML我們只需要在頁面中加入canvas標籤元素，其他的就看javascript的了。注意canvas元素是HTML5才有的元素，運行在支持HTML5的現代瀏覽器上。
複製代碼