HTML5實現刮獎效果

2021-09-22 20:49:51 字數 1638 閱讀 8266

原文:

html5實現刮獎效果

要實現刮獎效果,最重要的是要找到一種方法:當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation,這個屬性有多個值,而實現刮獎效果要用到的值就是destination-out。意思就是:在已有內容和新圖形不重疊的地方,已有內容保留,所有其他內容成為透明。這樣可能不好理解,後面實現的時候會解釋。有了globalcompositeoperation這個屬性,實現過程就很簡單了。

我們需要有兩個層,上面一層肯定是乙個canvas元素,因為要能刮開就要用到畫布。下面一層其實用什麼元素都可以,既然上層用的是canvas元素,下層我們也用canvas元素,下面是html內容:

先實現乙個建構函式:

var scratch = function (options) ;
在下層畫布上畫上刮獎的內容:

drawtext: function ()
這邊獎的內容是隨機出現的,因為獎肯定有很多種,可以用乙個陣列來存放獎的內容,然後隨機顯示:

this.award = this.options.awards[(math.random() * this.options.awards.length) | 0];
然後在上層畫布中畫一層塗層:

drawmask: function ()
在上層畫布中用了globalcompositeoperation這個屬性,當再在畫布上畫東西時,那麼後面畫的內容和塗層重合的部分將變透明,而其餘塗層部分不變。就是利用了這個原理實現了刮獎效果。

需要刮開上層的塗層,就需要在上層畫布上繫結事件:

addevent: function () 

}, false);

doc.addeventlistener("mouseup", callback3 = function () , false);

}, false);

}

result: function () 

}// 小於128的透明度的值的個數佔總透明度的的個數的百分比

return transpixelsarr.length / (pixelsarr.length / 4);

}

上面用到了getimagedata()方法,這個方法返回畫素資料。重要的是我們只是獲取了下層文字部分的畫素資料,因為我們只需要知道刮開的文字部分佔全部文字部分的百分比。

呼叫建構函式時,把可能改變的東西放在乙個物件options中傳遞給建構函式:

// 可能變化的值放在options中,方便修改

var options = ,

// 圖層顏色

maskcolor: "red",

// 畫逼半徑

radius: 20,

// 獎項

awards: ["一等獎", "二等獎", "三等獎", "謝謝!"]

};new scratch(options).init();

完整**可以檢視github:

demo:

HTML5實現刮獎效果

原文 html5實現刮獎效果 要實現刮獎效果,最重要的是要找到一種方法 當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation,這個屬性有多個值,而實現刮獎效果要用到的值就是destination out。意思就是 在已有...

html5實現刮刮卡效果

通過canvas實現的可刮塗層效果.修改img.src時塗層也會自動適應新的尺寸.修改layer函式可更改塗層樣式.塗層 可刮效果 以下是html源 已增加移動裝置支援 12 3456 78910 1112 1314 1516 1718 1920 2122 2324 2526 2728 2930 3...

cocos2dx刮獎效果實現

刮獎效果其實挺簡單的,需要用到rendertexture來進行渲染,通過你所要渲染的圖層,把該層的顏色進行設定混合就可以達到效果,具體看 我用的lua實現的。cpp view plain copy local winsize cc.director shareddirector getwinsize...