HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐
以下是一个简化的示例，展示了如何使用HTML5 <canvas> 元素和 JavaScript 来模拟电子彩票的刮刮乐效果：
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border:1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var isDrawing = false;
var lastX = 0;
var lastY = 0;
var hue = 0;
function draw(e) {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = 'hsl(' + hue + ', 100%, 50%)';
ctx.lineWidth = 10;
ctx.stroke();
ctx.closePath();
lastX = e.offsetX;
lastY = e.offsetY;
hue++;
}
canvas.addEventListener('mousedown', function(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', function() {
isDrawing = false;
});
canvas.addEventListener('mouseleave', function() {
isDrawing = false;
});
</script>
</body>
</html>这段代码实现了简单的绘画功能，并且在用户拖动鼠标时开始绘画，在鼠标松开时结束。通过监听鼠标的移动事件来实时绘制线条，并且为每条线条分配一个随机的色调以模拟多彩的彩票效果。当用户离开绘画区域时，也结束绘画。这个示例提供了基本的引导，可以根据需要添加更多高级功能，如重置、确认、记录奖励等。
评论已关闭