HTML5實現刮獎效果

原文:

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實現刮刮卡效果

cocos2dx刮獎效果實現

HTML5實現刮獎效果

HTML5實現刮獎效果

html5實現刮刮卡效果

cocos2dx刮獎效果實現

相關推薦