使用HTML5实现吸引人的刮刮乐抽奖

46 min read

以下是一个简单的刮刮乐奖券的HTML5布局，使用canvas元素实现：

<!DOCTYPE html>
<html>
<head>
	<title>刮刮乐奖券</title>
	<style type="text/css">
		canvas {
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<h1>刮刮乐奖券</h1>
	<p>刮开遮盖层，看看有没有中奖！</p>
	<canvas id="scratch-canvas" width="300" height="150"></canvas>
	<script type="text/javascript">
		// 获取canvas元素
		var canvas = document.getElementById('scratch-canvas');
		var ctx = canvas.getContext('2d');

		// 绘制背景
		ctx.fillStyle = '#ffd700';
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		// 绘制刮刮乐区域
		ctx.fillStyle = '#999';
		ctx.fillRect(50, 50, 200, 75);

		// 绘制文字
		ctx.fillStyle = '#fff';
		ctx.font = 'bold 20px Arial';
		ctx.fillText('刮开这里', 110, 95);

		// 绘制遮盖层
		ctx.fillStyle = '#ccc';
		ctx.fillRect(50, 50, 200, 75);

		// 鼠标事件处理
		canvas.addEventListener('mousedown', function(e) {
			canvas.addEventListener('mousemove', drawStroke);
		});

		canvas.addEventListener('mouseup', function(e) {
			canvas.removeEventListener('mousemove', drawStroke);
			checkPrize();
		});

		// 绘制刮开的区域
		function drawStroke(e) {
			var x = e.offsetX;
			var y = e.offsetY;
			ctx.clearRect(x - 20, y - 20, 40, 40);
		}

		// 检查是否中奖
		function checkPrize() {
			var imageData = ctx.getImageData(50, 50, 200, 75);
			var pixels = imageData.data;

			var isWinner = true;
			for (var i = 0; i < pixels.length; i += 4) {
				if (pixels[i] != 0) {
					isWinner = false;
					break;
				}
			}

			if (isWinner) {
				alert('恭喜中奖！');
			} else {
				alert('很遗憾，未中奖。');
			}
		}
	</script>
</body>
</html>

注意，以上代码只是一个基本的示例，实际上需要更多的细节处理和完善，比如优化刮开的动画效果、添加更多的中奖信息等等。