canvas实现刮刮奖效果

最新推荐文章于 2023-11-06 00:45:00 发布

chouruanzuo9332

最新推荐文章于 2023-11-06 00:45:00 发布

阅读量282

点赞数

文章标签：游戏

原文链接：https://my.oschina.net/u/2345157/blog/860189

版权

刮刮奖游戏在H5开发中是很常见的小游戏，实现起来也很简单，如下：

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

这一api,实现刮刮奖效果。具体代码如下：

html很简单，就是一个canvas元素，定义宽高。

<!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，也很简单，注意引入背景图。

* {
	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()这个方法。

使用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，

假如我们的canvas有四个像素点
每个像素点信息有分为RGBA四个方面的值
那么数组长度就应该是4×4 = 16
它们分别是
1R 1G 1B 1A
2R 2G 2B 2A
3R 3G 3B 3A
4R 4G 4B 4A

假如我们这里的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));
}

最后打印出来的比值，就是透明的占画布的总比值。

转载于:https://my.oschina.net/u/2345157/blog/860189

chouruanzuo9332

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现刮刮奖效果

刮刮奖游戏在H5开发中是很常见的小游戏，实现起来也很简单，如下：利用cxt.globalCompositeOperation = 'destination-out'; 这一api,实现刮刮奖效果。具体代码如下： html很简单，就是一个canvas元素，定义宽高。 <!...
复制链接

扫一扫