HTML5實現刮獎效果

阿新 • • 發佈：2019-01-21

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>刮刮樂</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: ["一等獎", "二等獎", "三等獎", "謝謝！"]
        };

        new Scratch(options).init();
    </script>
</body>
</html>

先實現一個建構函式：

var Scratch = function (options) {
	// 下層畫布元素
    this.underCanvas = doc.getElementById("underCanvas");
        // 上層畫布元素
    this.upCanvas = doc.getElementById("upCanvas");
        // 獲取下層畫布繪圖上下文
    this.underCtx = this.underCanvas.getContext("2d");
        // 獲取上層畫布繪圖上下文
    this.upCtx = this.upCanvas.getContext("2d");
   	    // 畫布寬度
        this.width = this.upCanvas.width;
        // 畫布高度
    this.height = this.upCanvas.height;
        // 自定義選項
    this.options = options;
    this.award = null;
};

在下層畫布上畫上刮獎的內容：

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]; //隨機抽獎
    ctx.fillText(this.award, this.width / 2, this.height / 2 + text.fontSize / 2);
}

這邊獎的內容是隨機出現的，因為獎肯定有很多種，可以用一個數組來存放獎的內容，然後隨機顯示：

this.award = this.options.awards[(Math.random() * this.options.awards.length) | 0];

如果不知道上面的位運算是什麼意思，可以參考我寫的上一篇文章"js中位運算的運用"。

然後在上層畫布中畫一層塗層：

drawMask: function () {
    var ctx = this.upCtx;
    ctx.fillStyle = this.options.maskColor;
    ctx.fillRect(0, 0, this.width, this.height);
    ctx.globalCompositeOperation = 'destination-out';
}

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

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

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);
            // 其實這邊的顏色值是可以隨便寫的，因為都會變成透明，重要的是透明度
            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();
			// 當刮開部分>80%的時候提醒刮獎結果，這個可以自己設定
            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);
}

我們需要在刮到一定程度時提醒刮獎的結果：

result: function () {
	// 獲取文字部分的寬、高
    var textWidth = this.options.text.fontSize * this.award.length;
    var textHeight = this.options.text.fontSize;
    // 獲取文字部分的畫素，這樣可以根據刮開文字的部分佔全部文字部分的百分比來提示結果，比如說在刮開80%的時候提示刮獎結果
    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，其實透明度的值是介於0~255之間的，0.5 * 255 = 127.5就是a的值
        if (a < 128) {
            transPixelsArr.push(a);
        }
    }
    // 小於128的透明度的值的個數佔總透明度的的個數的百分比
    return transPixelsArr.length / (pixelsArr.length / 4);
}

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

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

// 可能變化的值放在options中，方便修改
var options = {
	// 文字部分的樣式
    text: {
        fontWeight: "bold",
        fontSize: 30,
        fontFamily: "Arial",
        align: "center",
        color: '#F60'
    },
	// 圖層顏色
    maskColor: "red",
	// 畫逼半徑
    radius: 20,
	// 獎項
    awards: ["一等獎", "二等獎", "三等獎", "謝謝！"]
};

new Scratch(options).init();

HTML5實現刮獎效果

HTML5實現刮獎效果

HTML5模仿刮獎效果-頁面塗抹消失外掛wScratch

HTML5 Canvas實戰之刮獎效果

canvas實現刮圖效果

通過刮獎效果來學習

HTML5 實現小車動畫效果(Canvas/CSS3/JQuery)

Android刮獎效果

JavaScript刮獎效果(jquery圖片刮獎外掛)

ScratchView:一步步打造萬能的 Android 刮獎效果控制元件

html5中canvas畫布實現手機端和移動端的刮刮樂效果

Android 自己定義控件實現刮刮卡效果真的就僅僅是刮刮卡麽

canvas實現刮刮卡效果

刮刮樂實現android中刮牆效果

html5+css3實現2D動畫效果演示

jQuery刮彩票兌獎效果

基於HTML5實現3D監控應用流動效果

使用HTML5中的Canvas實現2D水池效果

Android實現刮刮卡效果

PorterDuffXfermode實現刮刮卡效果

Quick-Cocos2d-x3.3實現橡皮擦效果（刮刮樂）

HTML5實現刮獎效果

相關推薦