通過canvas實現的可刮塗層效果.
修改img.src時塗層也會自動適應新的尺寸.
修改layer函式可更改塗層樣式.
塗層:可刮效果:
以下是html源**(已增加移動裝置支援):12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
2930
3132
3334
3536
3738
3940
4142
4344
4546
4748
4950
5152
5354
5556
5758
5960
6162
6364
6566
6768
6970
7172
7374
75
需要判斷是否刮完時用這段**替換原**的eventup事件處理函式:12
3456
78910
11e.preventdefault();
mousedown =false;
vardata=ctx.getimagedata(0,0,w,h).data;
for(vari=0,j=0;iif(data[i] && data[i+1] && data[i+2] && data[i+3])
}
if(j<=w*h*0.1)
這段**中的0.1是10%的意思,在塗層的面積小於等於10%時,就彈出視窗,表示刮完了,可以根據需求自行調整.
通過canvas實現的可刮塗層效果.
修改img.src時塗層也會自動適應新的尺寸.
修改layer函式可更改塗層樣式.
塗層:可刮效果:
以下是html源**(已增加移動裝置支援):12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
2930
3132
3334
3536
3738
3940
4142
4344
4546
4748
4950
5152
5354
5556
5758
5960
6162
6364
6566
6768
6970
7172
7374
75
需要判斷是否刮完時用這段**替換原**的eventup事件處理函式:12
3456
78910
11e.preventdefault();
mousedown =false;
vardata=ctx.getimagedata(0,0,w,h).data;
for(vari=0,j=0;iif(data[i] && data[i+1] && data[i+2] && data[i+3])
}
if(j<=w*h*0.1)
這段**中的0.1是10%的意思,在塗層的面積小於等於10%時,就彈出視窗,表示刮完了,可以根據需求自行調整.
Html5實現移動端 PC端 刮刮卡效果
刮刮卡需求 每一位使用者有三次刮刮卡的機會 本次刮刮卡的結果會覆蓋上次的結果 刮刮卡的中獎機率呈現為遞增的曲線 保證三次中必須有一次中獎 刮出的結果包含按鈕既 領取獎品 or 再來一次 分享活動獎品公升級 這裡主要是微信分享的 了 我們自己的需求，今天就說怎麼製作刮刮卡，有這樣需求的可以找我要原始碼...
html5通過canvas實現刮刮卡效果示例分享
修改img.src時塗層也會自動適應新的尺寸.修改layer函式可更改塗層樣式 以下是html源 已增加移動裝置支援 複製 如下 需要判斷是否刮完時用這段 替換原 的eventup事件處理函式 複製 如下 e.preventdefault mousedown false var data ctx.g...
HTML5實現刮獎效果
原文 html5實現刮獎效果 要實現刮獎效果，最重要的是要找到一種方法 當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation，這個屬性有多個值，而實現刮獎效果要用到的值就是destination out。意思就是 在已有...