HTML5实现刮奖效果
要實(shí)現(xiàn)刮獎(jiǎng)效果，最重要的是要找到一種方法：當(dāng)刮開(kāi)上層的涂層是就能看到下層的結(jié)果。而HTML5的canvas API中有一個(gè)屬性globalCompositeOperation，這個(gè)屬性有多個(gè)值，而實(shí)現(xiàn)刮獎(jiǎng)效果要用到的值就是destination-out。意思就是：在已有內(nèi)容和新圖形不重疊的地方，已有內(nèi)容保留，所有其他內(nèi)容成為透明。這樣可能不好理解，后面實(shí)現(xiàn)的時(shí)候會(huì)解釋。有了globalCompositeOperation這個(gè)屬性，實(shí)現(xiàn)過(guò)程就很簡(jiǎn)單了。
我們需要有兩個(gè)層，上面一層肯定是一個(gè)canvas元素，因?yàn)橐芄伍_(kāi)就要用到畫(huà)布。下面一層其實(shí)用什么元素都可以，既然上層用的是canvas元素，下層我們也用canvas元素，下面是html內(nèi)容：
<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>刮刮樂(lè)</title> </head> <body><canvas id="underCanvas" width=300 height=300 style="position: absolute; left: 0;top: 0;"></canvas><canvas id="upCanvas" width=300 height=300 style="position: absolute; left: 0; top: 0;"></canvas><script src="./scratch.js"></script><script>// 可能變化的值放在options中，方便修改var options = {text: {fontWeight: "bold",fontSize: 30,fontFamily: "Arial",align: "center",color: '#F60'},maskColor: "red",radius: 30,awards: ["一等獎(jiǎng)", "二等獎(jiǎng)", "三等獎(jiǎng)", "謝謝！"]};new Scratch(options).init();</script> </body> </html>先實(shí)現(xiàn)一個(gè)構(gòu)造函數(shù)：
var Scratch = function (options) {// 下層畫(huà)布元素this.underCanvas = doc.getElementById("underCanvas");// 上層畫(huà)布元素this.upCanvas = doc.getElementById("upCanvas");// 獲取下層畫(huà)布繪圖上下文this.underCtx = this.underCanvas.getContext("2d");// 獲取上層畫(huà)布繪圖上下文this.upCtx = this.upCanvas.getContext("2d");// 畫(huà)布寬度this.width = this.upCanvas.width;// 畫(huà)布高度this.height = this.upCanvas.height;// 自定義選項(xiàng)this.options = options;this.award = null; };在下層畫(huà)布上畫(huà)上刮獎(jiǎng)的內(nèi)容：
drawText: function () {var ctx = this.underCtx;var text = this.options.text;ctx.font = text.fontWeight + " " + text.fontSize + 'px ' + text.fontFamily;ctx.textAlign = text.align;ctx.fillStyle = text.color;this.award = this.options.awards[(Math.random() * this.options.awards.length) | 0]; //隨機(jī)抽獎(jiǎng)ctx.fillText(this.award, this.width / 2, this.height / 2 + text.fontSize / 2); }這邊獎(jiǎng)的內(nèi)容是隨機(jī)出現(xiàn)的，因?yàn)楠?jiǎng)肯定有很多種，可以用一個(gè)數(shù)組來(lái)存放獎(jiǎng)的內(nèi)容，然后隨機(jī)顯示：
this.award = this.options.awards[(Math.random() * this.options.awards.length) | 0];如果不知道上面的位運(yùn)算是什么意思，可以參考我寫(xiě)的上一篇文章"js中位運(yùn)算的運(yùn)用"。
然后在上層畫(huà)布中畫(huà)一層涂層：
drawMask: function () {var ctx = this.upCtx;ctx.fillStyle = this.options.maskColor;ctx.fillRect(0, 0, this.width, this.height);ctx.globalCompositeOperation = 'destination-out'; }在上層畫(huà)布中用了globalCompositeOperation這個(gè)屬性，當(dāng)再在畫(huà)布上畫(huà)東西時(shí)，那么后面畫(huà)的內(nèi)容和涂層重合的部分將變透明，而其余涂層部分不變。就是利用了這個(gè)原理實(shí)現(xiàn)了刮獎(jiǎng)效果。
需要刮開(kāi)上層的涂層，就需要在上層畫(huà)布上綁定事件：
addEvent: function () {var that = this;var upCanvas = this.upCanvas;var callback1, callback2, callback3;upCanvas.addEventListener("mousedown", callback1 = function (evt) {upCanvas.addEventListener("mousemove", callback2 = function (evt) {var x = evt.clientX - upCanvas.offsetLeft;var y = evt.clientY - upCanvas.offsetTop;var ctx = that.upCtx;var options = that.options;ctx.beginPath();var gradient = ctx.createRadialGradient(x, y, 0, x, y, options.radius);// 其實(shí)這邊的顏色值是可以隨便寫(xiě)的，因?yàn)槎紩?huì)變成透明，重要的是透明度gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");gradient.addColorStop(1, "rgba(255, 255, 255, 0)");// 也可以不用漸變，直接用一種顏色，但漸變效果更好ctx.fillStyle = gradient;ctx.arc(x, y, options.radius, 0, Math.PI * 2, true);ctx.fill();ctx.closePath();// 當(dāng)刮開(kāi)部分>80%的時(shí)候提醒刮獎(jiǎng)結(jié)果，這個(gè)可以自己設(shè)置if (that.result() > 0.8) {alert(that.award);upCanvas.removeEventListener("mousemove", callback2);}}, false);doc.addEventListener("mouseup", callback3 = function () {upCanvas.removeEventListener("mousemove", callback2);doc.removeEventListener("mouseup", callback3);}, false);}, false); }我們需要在刮到一定程度時(shí)提醒刮獎(jiǎng)的結(jié)果：
result: function () {// 獲取文字部分的寬、高var textWidth = this.options.text.fontSize * this.award.length;var textHeight = this.options.text.fontSize;// 獲取文字部分的像素，這樣可以根據(jù)刮開(kāi)文字的部分占全部文字部分的百分比來(lái)提示結(jié)果，比如說(shuō)在刮開(kāi)80%的時(shí)候提示刮獎(jiǎng)結(jié)果var imgData = this.upCtx.getImageData(this.width / 2 - textWidth / 2, this.height / 2 - textHeight / 2, textWidth, textHeight);var pixelsArr = imgData.data;var transPixelsArr = [];for (var i = 0, j = pixelsArr.length; i < j; i += 4) {// a代表透明度var a = pixelsArr[i + 3];// 漸變的透明度＜=0.5，其實(shí)透明度的值是介于0~255之間的，0.5 * 255 = 127.5就是a的值if (a < 128) {transPixelsArr.push(a);}}// 小于128的透明度的值的個(gè)數(shù)占總透明度的的個(gè)數(shù)的百分比return transPixelsArr.length / (pixelsArr.length / 4); }上面用到了getImageData()方法，這個(gè)方法返回像素?cái)?shù)據(jù)。重要的是我們只是獲取了下層文字部分的像素?cái)?shù)據(jù)，因?yàn)槲覀冎恍枰拦伍_(kāi)的文字部分占全部文字部分的百分比。
調(diào)用構(gòu)造函數(shù)時(shí)，把可能改變的東西放在一個(gè)對(duì)象options中傳遞給構(gòu)造函數(shù)：
// 可能變化的值放在options中，方便修改 var options = {// 文字部分的樣式text: {fontWeight: "bold",fontSize: 30,fontFamily: "Arial",align: "center",color: '#F60'},// 圖層顏色maskColor: "red",// 畫(huà)逼半徑radius: 20,// 獎(jiǎng)項(xiàng)awards: ["一等獎(jiǎng)", "二等獎(jiǎng)", "三等獎(jiǎng)", "謝謝！"] };new Scratch(options).init();完整代碼可以查看Github：https://github.com/lwzhang/scratch
DEMO：http://lwzhang.github.io/scratch/scratch.html
總結(jié)
以上是生活随笔為你收集整理的HTML5实现刮奖效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 一起学windows phone7开发(
- 下一篇： 【Chrome插件】使用FE助手-百度W