HTML Canvas 刮刮卡抽奖效果的实现

最新推荐文章于 2024-05-16 02:24:07 发布

apples_kk

最新推荐文章于 2024-05-16 02:24:07 发布

阅读量624

点赞数 1

分类专栏： javascript 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/love_bb/article/details/127111539

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原生js实现，页面仅需插入以下div标签

<div id="gp-dvi-c"></div>

复制js方法到页面底部，既可实现刮刮卡效果。

此效果，可以配置奖品为文字或图片。便捷自定义修改所需效果，适配了移动端、及pc端

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8">
		<title>刮刮卡</title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="gp-dvi-c"></div>
	</body>
	<script type="text/javascript">
		gginit();

		function ggconfig() {
			jackpots = ["一等奖", "二等奖", "三等奖", "四等奖", "奖励奖"]; //文字奖品
			// pici = '1.jpg';//图片奖品 存在即使用图片
			pici = '';

			cw = 300; //刮刮卡宽度
			ch = 150; //刮刮卡高度
			grd = 100; //干扰点数量
			bcw = 16; //刮刮笔触大小
		}

		function gginit() {
			ggconfig();

			//一等奖概率2% 二等奖概率6% 三等奖概率14% 四等奖概率30% 奖励奖概率48%
			let jackpot = randmn(0, 49);
			let jkp = '';
			if (jackpot == 0) {
				jkp = jackpots[0];
			} else if (jackpot > 0 && jackpot < 4) {
				jkp = jackpots[1];
			} else if (jackpot > 3 && jackpot < 11) {
				jkp = jackpots[2];
			} else if (jackpot > 10 && jackpot < 26) {
				jkp = jackpots[3];
			} else {
				jkp = jackpots[4];
			}

			dvic = document.getElementById('gp-dvi-c');
			dvic.style.position = 'relative';
			dvic.style.margin = '100px auto';
			dvic.style.width = cw + 'px';
			dvic.style.height = ch + 'px';

			cvspj = document.createElement('canvas');
			cvspj.width = cw;
			cvspj.height = ch;
			cvspj.style.position = 'absolute';
			dvic.appendChild(cvspj);

			let ctx0 = cvspj.getContext("2d");
			if (pici) {
				let img = new Image()
				img.onload = function() {
					ctx0.drawImage(img, 0, 0, cw, ch)
				}
				img.src = pici;
			} else {
				ctx0.font = '30px Arial';
				ctx0.fillStyle = "rgba(255, 0, 0, 1)";
				let text0 = jkp;
				let txtw0 = ctx0.measureText(text0).width;
				let txth0 = ctx0.measureText('M').width;
				ctx0.fillText(text0, cw / 2 - txtw0 / 2, ch / 2 + txth0 / 2);
				ctx0.strokeStyle = 'rgba(255, 0, 0, 1)';
				ctx0.strokeRect(0, 0, cw, ch);
			}

			ggkcvs();
		}

		function ggkcvs() {
			cvsggk = document.createElement('canvas');
			cvsggk.width = cw;
			cvsggk.height = ch;
			cvsggk.style.cursor = 'pointer';
			cvsggk.style.position = 'absolute';
			cvsggk.style.filter = 'blur(0.7px)';
			dvic.appendChild(cvsggk);
			ctx = cvsggk.getContext("2d");
			ctx.fillStyle = "rgba(200, 200, 200, 1)";
			ctx.fillRect(0, 0, cw, ch);
			ctx.font = '20px Arial';
			ctx.fillStyle = "rgba(255, 255, 255, 1)"
			let text = "祝君好运";
			let txtw = ctx.measureText(text).width;
			let txth = ctx.measureText('M').width;
			ctx.fillText(text, cw / 2 - txtw / 2, ch / 2 + txth / 2);
			let fillColor = [
				"rgba(255, 0, 0, 0.8)",
				"rgba(255, 255, 0, 0.8)",
				"rgba(255, 0, 255, 0.8)",
				"rgba(0, 255, 255, 0.8)"
			];
			for (let i = 0; i < grd; i++) {
				ctx.beginPath();
				ctx.fillStyle = fillColor[randmn(0, 3)];
				ctx.arc(randmn(0, cw), randmn(0, ch), 1, 0, 2 * Math.PI);
				ctx.closePath();
				ctx.fill();
			}
			cvsggk.addEventListener("mousedown", handlerDownFn);
			cvsggk.addEventListener("mousemove", handlerMoveFn);
			cvsggk.addEventListener("mouseup", handlerUpFn);
			cvsggk.addEventListener('touchstart', handlerDownFn);
			cvsggk.addEventListener('touchmove', handlerMoveFn);
			cvsggk.addEventListener('touchend', handlerUpFn);
			hasDown = false;
		}

		function randmn(n, m) {
			let c = m - n + 1;
			return Math.floor(Math.random() * c + n);
		}

		function handlerDownFn(event) {
			hasDown = true;
			// console.log(event);
		}

		function handlerMoveFn(event) {
			if (hasDown) {
				let x = 0,
					y = 0;
				if (event.offsetX && event.offsetY) {
					x = event.offsetX;
					y = event.offsetY;
				} else {
					let bcr = cvspj.getBoundingClientRect();
					x = event.touches[0].clientX - bcr.left;
					y = event.touches[0].clientY - bcr.top;
				}
				// console.log(x, y)
				ctx.beginPath();
				ctx.arc(x, y, bcw, 0, 2 * Math.PI);
				ctx.globalCompositeOperation = "destination-out";
				ctx.closePath();
				ctx.fill();
			}
		}

		function handlerUpFn(event) {
			let imageData = ctx.getImageData(0, 0, cw, ch),
				length = imageData.data.length,
				transparentCount = 0;
			for (let i = 3; i < length; i += 4) {
				if (imageData.data[i] == 0 || imageData.data[i] == 1) transparentCount++;
			}
			// console.log(transparentCount, length)
			if (transparentCount >= (length / 4 / 3)) {
				console.log('刮开啦');
				ctx.clearRect(0, 0, cw, ch);
				cvsggk.removeEventListener("mousedown", handlerDownFn);
				cvsggk.removeEventListener("mousemove", handlerMoveFn);
				cvsggk.removeEventListener("mouseup", handlerUpFn);
				cvsggk.removeEventListener('touchstart', handlerDownFn);
				cvsggk.removeEventListener('touchmove', handlerMoveFn);
				cvsggk.removeEventListener('touchend', handlerUpFn);
			}
			hasDown = false;
		}
	</script>
</html>