HTML5 刮刮乐前端代码示例 - 简单易懂

以下是一个简单的刮刮乐前端代码示例，包含 HTML、CSS 和 JavaScript 代码。

HTML 部分：

<div id='scratchcard'>
    <canvas id='canvas'></canvas>
    <div id='message'></div>
</div>

CSS 部分：

#scratchcard {
    position: relative;
    width: 400px;
    height: 200px;
    background: url('background.jpg') no-repeat center center;
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #000;
    text-align: center;
}

JavaScript 部分：

// 获取 canvas 元素和绘图上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 设置刮刮乐涂层颜色
ctx.fillStyle = '#666';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 监听鼠标移动事件，绘制路径
canvas.addEventListener('mousemove', function(e) {
    if (e.buttons !== 1) {
        return;
    }
    var x = e.offsetX;
    var y = e.offsetY;
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, 2 * Math.PI);
    ctx.fill();
});

// 监听 canvas 加载完成事件，显示刮刮乐涂层
canvas.addEventListener('load', function() {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
});

// 监听 canvas 加载完成事件，显示中奖信息
canvas.addEventListener('load', function() {
    var message = document.getElementById('message');
    message.innerHTML = '恭喜你，中了一等奖！';
});

以上代码实现了基本的刮刮乐功能，包括绘制刮刮乐涂层、刮开涂层、显示中奖信息等。可以根据实际需求进行修改和完善。

例如，你可以：

• 更改涂层颜色和背景图片
• 调整刮开效果
• 添加动画效果
• 改变中奖信息
• 与后端交互，获取实际中奖结果
• 等等

希望本示例能帮助你快速上手刮刮乐前端开发。