刮刮卡需求：
每一位使用者有三次刮刮卡的機會
本次刮刮卡的結果會覆蓋上次的結果
刮刮卡的中獎機率呈現為遞增的曲線（保證三次中必須有一次中獎）
刮出的結果包含按鈕既（領取獎品 or 再來一次 ）
分享活動獎品公升級（這裡主要是微信分享的**了）
我們自己的需求，今天就說怎麼製作刮刮卡，有這樣需求的可以找我要原始碼
第一、body建立canvas
xml/html code複製內容到剪貼簿
這裡我們首先建立了乙個canvas，並且在canvas底部加上了刮開後的效果。
第二、 頁面載入後開始初始化畫布
首先定義一些需要的變數
xml/html code複製內容到剪貼簿
頁面載入後開始初始化畫布（這樣子就可以在頁面建立乙個畫布了）
xml/html code複製內容到剪貼簿
第三、畫灰色的矩形鋪滿
xml/html code複製內容到剪貼簿
第四、滑鼠按下 和 觸控開始
xml/html code複製內容到剪貼簿
第五、滑鼠抬起 和 觸控結束
xml/html code複製內容到剪貼簿
第六、滑鼠移動 和 觸控移動
xml/html code複製內容到剪貼簿
第七： 如果沒有抽中再來一次
很明顯，再來一次就是初始化所有的值，畫布重新載入，但是如果有次數限制的需求，務必在這裡計算清楚。
注：由於我們要求的比較多今天就不說怎麼計算中獎概率的方法了。
本文標題: html5實現移動端、pc端 刮刮卡效果
本文位址:
HTML5實現刮獎效果
原文 html5實現刮獎效果 要實現刮獎效果，最重要的是要找到一種方法 當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation，這個屬性有多個值，而實現刮獎效果要用到的值就是destination out。意思就是 在已有...
HTML5實現刮獎效果
原文 html5實現刮獎效果 要實現刮獎效果，最重要的是要找到一種方法 當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation，這個屬性有多個值，而實現刮獎效果要用到的值就是destination out。意思就是 在已有...
HTML5移動端優化
手機端筆記 float在渲染時計算量比較大，儘量減少使用 過多的font size引發css樹的效率 a 避免不必要的dom操作 b 盡量改變class而不是style，使用classlist代替classname c 避免使用document.write d 減少drawimage meta na...