canvas實現刮刮獎效果

時間 2019-12-06

標籤 canvas 實現刮刮效果简体版

原文原文鏈接

刮刮獎遊戲在H5開發中是很常見的小遊戲，實現起來也很簡單，以下：javascript

利用 cxt.globalCompositeOperation = 'destination-out'; css

這一api,實現刮刮獎效果。具體代碼以下：html

html很簡單，就是一個canvas元素，定義寬高。java

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刮刮獎</title>
	</head>

	<body>
		<div class="container">
			<canvas id="zwhCanvas" width="512" height="384"></canvas>
		</div>
		
	</body>

</html>

接下來是css，也很簡單，注意引入背景圖。canvas

* {
	margin: 0;
	padding: 0;
}

.container {
	margin: 0 auto;
	text-align: center;
}

.container canvas {
	background: url(img/Koala.jpg) no-repeat center center/100% 100%;
	cursor: pointer;
}

重點是js，最下面的getTransparent()這個方法。api

使用getImageData(x, y, dx, dy)能夠獲取canvas的像素信息
方法由環境對象調用（咱們這裏是cxt）
（一樣受同源策略限制）
前兩個參數是要獲取圖像信息的起始座標，後兩個參數就是要獲取圖像信息的寬高
（相似於矩形繪製函數）
這個方法返回一個ImageData對象（包括像素信息數組data還有寬高width/height）
咱們主要用這個對象的data屬性數組

假如咱們畫布的大小是500×500
因此獲取canvas上全部像素信息就是這樣：函數

console.log(cxt.getImageData(0, 0, 500, 500).data);

咱們發現這個數組的長度爲100w，url

假如咱們的canvas有四個像素點
每一個像素點信息有分爲RGBA四個方面的值
那麼數組長度就應該是4×4 = 16
它們分別是
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A spa

假如咱們這裏的canvas一共有500×500 = 25w個像素點
因此像素信息數組大小爲 25w×4 = 100w

var can = document.getElementById("zwhCanvas");
var w = can.width;
var h = can.height;

var cxt = can.getContext("2d");
cxt.fillStyle = "lightgray";
cxt.fillRect(0, 0, w, h);
cxt.globalCompositeOperation = 'destination-out';
cxt.lineWidth = '30';
cxt.lineCap = 'round';
can.onmousedown = function(event) {
	var ev = ev || window.event;
	var lastw = ev.clientX - can.offsetLeft;//獲取鼠標相對於canvas畫布的x,y值
	var lasth = ev.clientY - can.offsetTop;//
	cxt.lineTo(lastw, lasth);
	cxt.beginPath();
	can.onmousemove = function(event) {
		var ev = ev || window.event;
		var lastw = ev.clientX - can.offsetLeft;
		var lasth = ev.clientY - can.offsetTop;
		cxt.lineTo(lastw, lasth);
		cxt.stroke();
	}
	can.onmouseup = function(event) {
		can.onmousemove = null;
        getTransparent();//在這裏調用獲取面積比的方法，來提示用戶是否中獎。
	}
}

/*
 * 獲取透明的與不透明的比例從而 知道用戶颳了的面積佔總面積的百分比
 */
function getTransparent() {
	var tr = 0;
	var notr = 0;
	cxt.getImageData(0, 0, w, h).data.forEach(function(item, index) {
		if(index % 4 == 3) {
			if(item == 0) {
				tr++;
			} else if(item == 255) {
				notr++;
			}
		}
	});
	console.log('tr:' + tr);
	console.log('notr:' + notr);
	console.log("比例:" + tr / (notr + tr));
}

最後打印出來的比值，就是透明的佔畫布的總比值。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。