目前在html5和css3的熱潮下，html頁面的效果也是層出不窮，下面我們來介紹使用canvas來模仿刮獎刮開效果。
原理在需要刮出的或者文字上方蓋上一層灰色或者其他背景的canvas畫布，當手指或者滑鼠點選畫布並移動時，將畫布上移動過的軌跡變成透明即可。
分析demo中在class為content的div上蓋上一層灰色的畫布，然後通過獲取滑鼠和手指的座標計算出在畫布位置上的座標，通過在座標原點位置畫乙個半徑10px的透明圓形來透過畫布，顯示出畫布下的內容。本demo是用時需要改變的內容為_width，_height,touchtop,touchleft這幾個引數，根據自身畫布的位置自行計算即可。由於是長按事件，記得在移動端阻止瀏覽器預設功能。
效果圖：
圖（1）初始圖
圖（2）刮開效果
**如下：
無標題文件中獎啦~！
本文標題: canvas實現刮刮卡效果
本文位址:
canvas實現刮刮卡
canvas上下文物件的globalcompositeoperation屬性 刮刮卡功能主要是使用這個值的設定來實現的，之前介紹過globalcompositeoperation屬性共有11種值，詳細介紹可以訪問html 5 canvas 參考手冊 這裡簡單的對11種值做一下截圖 他這裡寫的源物件可...
canvas 繪製刮刮卡
思路 用div來展示刮獎結果，用canvas繪製刮獎前展示的或者文字 將canvas疊在div上方，刮獎是只需要操作canvas配合touch事件即可簡單完成。canvas刮獎可以用globalcompositeoperation屬性製作。globalcompositeoperation 屬性值描述...
html5通過canvas實現刮刮卡效果示例分享
修改img.src時塗層也會自動適應新的尺寸.修改layer函式可更改塗層樣式 以下是html源 已增加移動裝置支援 複製 如下 需要判斷是否刮完時用這段 替換原 的eventup事件處理函式 複製 如下 e.preventdefault mousedown false var data ctx.g...