思路=》
用div來展示刮獎結果，用canvas繪製刮獎前展示的或者文字；將canvas疊在div上方，刮獎是只需要操作canvas配合touch事件即可簡單完成。
canvas刮獎可以用globalcompositeoperation屬性製作。
globalcompositeoperation：
屬性值描述
source-over (default)
新圖形會覆蓋在原有內容之上
destination-over
會在原有內容之下繪製新圖形
source-in
新圖形會僅僅出現與原有內容重疊的部分。其它區域都變成透明的
destination-in
原有內容中與新圖形重疊的部分會被保留，其它區域都變成透明的
source-out
結果是只有新圖形中與原有內容不重疊的部分會被繪製出來
destination-out
原有內容中與新圖形不重疊的部分會被保留
source-atop
新圖形中與原有內容重疊的部分會被繪製，並覆蓋於原有內容之上
destination-atop
原有內容中與新內容重疊的部分會被保留，並會在原有內容之下繪製新圖形
lighter
兩圖形中重疊部分作加色處理
darker
兩圖形中重疊的部分作減色處理
xor
重疊的部分會變成透明
copy
只有新圖形會被保留，其它都被清除掉
實現**
class scratchview code//初始化
init()
//獲得容器的寬高（用於設定canvas寬高）
getsize()
//建立canvas並設定寬高插入容器中
createcanvas()
//繪製前景圖 必須預載入
drawbg()
}//新增touch事件
event())
obj.addeventlistener("touchmove",event=>)
obj.addeventlistener("touchend",event=>{})
}//擦拭canvas
touchcanvas(event)
if(!this
.isprize)
var e=window.event||event;
e.preventdefault();
//禁止ios和安卓預設事件頁面下拉動
this.clearcanvas(e.targettouches[0].pagex-this.left,e.targettouches[0].pagey-this
.top);
}//繪製圓形 橡皮擦
clearcanvas(x,y)
//計算透明區域
compute()
}let area= (transpixels.length / (pixels.length / 4) * 100).tofixed(2);
if(area>this
.area)
}//再來一次（重置）
reset()
}
（第一次寫部落格，有錯請見諒）
canvas實現刮刮卡
canvas上下文物件的globalcompositeoperation屬性 刮刮卡功能主要是使用這個值的設定來實現的，之前介紹過globalcompositeoperation屬性共有11種值，詳細介紹可以訪問html 5 canvas 參考手冊 這裡簡單的對11種值做一下截圖 他這裡寫的源物件可...
canvas實現刮刮卡效果
目前在html5和css3的熱潮下，html頁面的效果也是層出不窮，下面我們來介紹使用canvas來模仿刮獎刮開效果。原理在需要刮出的或者文字上方蓋上一層灰色或者其他背景的canvas畫布，當手指或者滑鼠點選畫布並移動時，將畫布上移動過的軌跡變成透明即可。分析demo中在class為content的...
html5 canvas製作刮刮卡
下班後，閒著無事，剛好近期在學習畫布相關知識，就寫了個刮刮卡的demo練一下手，相容安卓 ios哦。高手路過，多多指點！刮刮卡實現原理 通過canvas繪製乙個，使用者手指觸發螢幕時，刮開當前一部分封面圖，從而顯示正文中的內容。整體運用canvas的globalcompositeoperation屬...