之前公司項目有一個刮獎小游戲的需求，因此有了本文記錄該“刮刮樂”游戲的實現(xiàn)過程。
話不多說，先上Demo 和 項目源碼 .
2. 實現(xiàn)
我們創(chuàng)建一個 ScrapAward 類，通過傳入 option 和調(diào)用其 restart() 方法實現(xiàn)重新開始。
（1）定義 option 參數(shù)及 ScrapAward 結(jié)構(gòu)
class ScrapAward {
constructor(userOption) {
this.option = {
canvasId: 'canvas', // canvas的id
backgroundImageUrl: '', // 背景圖url
width: 320, // canvas寬度
height: 160, // canvas高度
backgroundSize: '100% 100%',
coverImage: { // 覆蓋圖層背景圖url
url: '',
width: 320,
height: 160,
},
callback: () => {}, // 刮獎完成的回調(diào)函數(shù)
};
this.ctx = null;
this.init(userOption); // 初始化
}
// 初始化方法
init(userOption) {
}
// 重新開始也是一次初始化
restart(userOption) {
if (userOption) {
this.init(userOption);
} else {
this.init({});
}
}
}
（2） init 初始化
首先合并用戶的配置 userOption 和默認(rèn) option , 等背景圖片加載完成后調(diào)用 fillCanvas() 方法繪制覆蓋層的圖片后設(shè)置 canvas 的背景圖。
當(dāng)上述行為完成后，我們便監(jiān)聽鼠標(biāo)或者touch事件。刮獎這一行為其實是canvas對鼠標(biāo)或者touch的移動路徑進(jìn)行繪畫，只不過是將繪畫的路徑變成了透明，這種效果我們通過設(shè)置 ctx.globalCompositeOperation = 'destination-out'; 即可實現(xiàn)。
init(userOption) {
// 合并用戶配置
if (Object.assign) {
Object.assign(this.option, userOption);
} else {
extend(this.option, userOption, true);
}
// 定義一系列變量
let that = this,
img = (this.img = new Image()), //背景圖片
imgLoaded = false, //背景圖是否加載完成
canvas = (this.canvas = document.querySelector(`#${this.option.canvasId}`)),
hastouch = 'ontouchstart' in window ? true : false,
tapstart = hastouch ? 'touchstart' : 'mousedown',
tapmove = hastouch ? 'touchmove' : 'mousemove',
tapend = hastouch ? 'touchend' : 'mouseup',
coverImg = (this.coverImg = new Image()),
hasDone = false, // 是否刮獎完畢
coverImgLoad = false;
that.mousedown = false; //鼠標(biāo)的mousedown事件或者touchmove事件是否開啟
// 移除事件監(jiān)聽，用于重新開始
if (this.canvas) {
this.canvas.removeEventListener(tapstart, eventDown);
this.canvas.removeEventListener(tapend, eventUp);
this.canvas.removeEventListener(tapmove, eventMove);
}
coverImg.src = this.option.coverImage.url;
coverImg.crossOrigin = 'Anonymous'; // 解決一些跨域問題
img.src = this.option.backgroundImageUrl;
var w = (img.width = this.option.width),
h = (img.height = this.option.height);
this.canvasOffsetX = canvas.offsetLeft;
this.canvasOffsetY = canvas.offsetTop;
canvas.width = w;
canvas.height = h;
this.ctx = canvas.getContext('2d');
let ctx = this.ctx;
this.img.addEventListener('load', backgroundImageLoaded);
this.option.coverImage.url && this.coverImg.addEventListener('load', coverImageLoaded);
// 背景圖片加載完成后
function backgroundImageLoaded(e) {
imgLoaded = true;
fillCanvas();
canvas.style.background = 'url(' + img.src + ') no-repeat';
canvas.style.backgroundSize = that.option.backgroundSize || 'contain';
}
// 覆蓋圖片加載完成后
function coverImageLoaded(e) {
coverImgLoad = true;
fillCanvas();
canvas.style.background = 'url(' + img.src + ') no-repeat';
canvas.style.backgroundSize = that.option.backgroundSize || 'contain';
}
// 繪制canvas
function fillCanvas() {
if (that.option.coverImage.url && (!imgLoaded || !coverImgLoad)) return;
if (!that.option.coverImage.url) {
ctx.fillStyle = that.option.coverImage.color || 'gray';
ctx.fillRect(0, 0, w, h);
} else {
ctx.drawImage(coverImg, 0, 0, that.option.coverImage.width, that.option.coverImage.height);
}
ctx.globalCompositeOperation = 'destination-out';
canvas.addEventListener(tapstart, eventDown);
canvas.addEventListener(tapend, eventUp);
canvas.addEventListener(tapmove, eventMove);
}
// 點擊開始事件
function eventDown(e) {
e.preventDefault();
that.mousedown = true;
}
// 點擊結(jié)束事件
function eventUp(e) {
e.preventDefault();
that.mousedown = false;
}
// 刮獎事件
function eventMove(e) {
if (hasDone) return; // 刮獎結(jié)束則return
let ctx = that.ctx;
e.preventDefault();
if (that.mousedown) {
if (e.changedTouches) {
e = e.changedTouches[0];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - that.canvasOffsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - that.canvasOffsetY || 0;
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
}
}
}
（3）刮獎完畢的實現(xiàn)
上述代碼實現(xiàn)刮獎的效果，但是一般的場景是用戶刮獎的面積超過一半時，覆蓋圖層全部散開，此時為刮獎完成的狀態(tài)。
如何知道刮獎的面積超過一半了呢？ canvas 中的 ctx 對象提供了一個方法 getImageData() , 該方法可返回某個區(qū)域內(nèi)每個像素點的數(shù)值的組成的數(shù)組，數(shù)組中4個元素表示一個像素點的rgba值。
因此我們可以判斷 rgba 中的 a 值透明度，透明度小于 256 的一半（ 128 ）即可視為透明狀態(tài)，計算透明 a 值的百分比.
判斷 a 值百分比大于 50 , 則調(diào)用 ctx.clearRect(0, 0, w, h); 清除畫布, 并執(zhí)行成功回調(diào) callback .
function eventMove(e) {
if (hasDone) return; // 刮獎結(jié)束則return
let ctx = that.ctx;
e.preventDefault();
if (that.mousedown) {
if (e.changedTouches) {
e = e.changedTouches[0];
}
var x = (e.clientX + document.body.scrollLeft || e.pageX) - that.canvasOffsetX || 0,
y = (e.clientY + document.body.scrollTop || e.pageY) - that.canvasOffsetY || 0;
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
}
handleFilledPercentage(getFilledPercentage());
}
// 計算已經(jīng)刮過的區(qū)域占整個區(qū)域的百分比
function getFilledPercentage() {
let imgData = that.ctx.getImageData(0, 0, w, h);
// imgData.data是個數(shù)組，存儲著指定區(qū)域每個像素點的信息，數(shù)組中4個元素表示一個像素點的rgba值
let pixels = imgData.data;
let transPixels = [];
for (let i = 0; i < pixels.length; i += 4) {
// 嚴(yán)格上來說，判斷像素點是否透明需要判斷該像素點的a值是否等于0，
// 為了提高計算效率，這兒設(shè)置當(dāng)a值小于128，也就是半透明狀態(tài)時就可以了
if (pixels[i + 3] < 128) {
transPixels.push(pixels[i + 3]);
}
}
return ((transPixels.length / (pixels.length / 4)) * 100).toFixed(2) + '%';
}
// 設(shè)置閾值，去除灰色涂層
function handleFilledPercentage(percentage) {
percentage = percentage || 0;
if (parseInt(percentage) > 50) {
// 當(dāng)像素點的個數(shù)超過 50% 時，清空畫布，顯示底圖
ctx.clearRect(0, 0, w, h);
hasDone = true;
that.option.callback();
}
}
3. 使用
將代碼引入 html 后，新建 new scraAward(option) 即可實現(xiàn)。頁面結(jié)構(gòu)如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>實現(xiàn)一個“刮刮樂”游戲</title>
<style type="text/css">
.demo {
width: 320px;
margin: 10px auto 20px auto;
min-height: 300px;
}
.msg {
text-align: center;
height: 32px;
line-height: 32px;
font-weight: bold;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="msg">
刮刮下面圖片看看什么效果哈哈哈，<a href="javascript:void(0)" id="try_again">再來一次</a>
</div>
<div class="demo">
<canvas id="canvas"></canvas>
</div>
</div>
<script src="./scrapAward-dev.js"></script>
<script>
window.onload = function() {
let scraAward = new ScrapAward({
height: 570,
backgroundImageUrl: './suporka_home.jpg',
coverImage: {
url: './super.jpg',
// color: 'red',
width: 428,
height: 570,
},
callback: () => {
alert('刮獎結(jié)束');
},
});
document.getElementById('try_again').addEventListener('click', function(e) {
scraAward.restart();
});
};
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的Html5 Canvas 實現(xiàn)一個“刮刮樂”游戲,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
