知识问答
如何利用HTML5 canvas标签实现刮刮卡效果？
2025-09-21 14:06:58
来源：互联网转载
HTML5 canvas 标签可以通过绘制图像和覆盖层，结合鼠标或触摸事件实现刮刮卡效果。
HTML5 中的<canvas> 标签提供了一个强大的工具，用于在网页上绘制图形和动画，通过结合 JavaScript，我们可以使用这个标签来实现许多有趣的效果，其中之一就是刮刮卡效果，这种效果常见于抽奖、优惠券和彩票等场景中。
基本思路
1、创建画布：我们需要创建一个 HTML5<canvas> 元素，并为其分配一个唯一的 ID。
2、绘制背景图像：在<canvas> 上绘制刮刮卡的背景图像，这可以是任何你想要展示的内容，例如奖品信息或广告。
3、覆盖图层：再绘制一个半透明的覆盖层，模拟刮刮卡上的涂层。
4、**鼠标事件：通过 JavaScript **用户的鼠标动作（如点击和移动），并根据这些动作擦除覆盖层的一部分，从而显示出下面的背景图像。
实现步骤
1. 创建画布
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <title>Canvas Scratch Card</title></head><body> <canvas id="scratchCard" width="400" height="400"></canvas> <ｓｃｒｉｐｔ src="scratchcard.js"></ｓｃｒｉｐｔ></body></html>
2. 绘制背景图像和覆盖图层
在scratchcard.js 文件中，我们将编写以下代码：
const canvas = document.getElementById('scratchCard');const ctx = canvas.getContext('2d');// 加载背景图像let bgImage = new Image();bgImage.src = 'background.jpg'; // 替换为你的图片路径bgImage.onload = function() { ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height); drawCoverLayer();};function drawCoverLayer() { // 设置覆盖图层的颜色和透明度 ctx.fillStyle = '#000'; ctx.globalAlpha = 0.6; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalAlpha = 1; // 重置透明度}3. **鼠标事件并擦除覆盖层
继续在scratchcard.js 文件中添加以下代码：
let isDrawing = false;let previousX, previousY;canvas.addEventListener('mousedown', startDrawing);canvas.addEventListener('mousemove', draw);canvas.addEventListener('mouseup', stopDrawing);canvas.addEventListener('mouseout', stopDrawing);function startDrawing(e) { isDrawing = true; previousX = e.clientX canvas.offsetLeft; previousY = e.clientY canvas.offsetTop;}function draw(e) { if (!isDrawing) return; ctx.clearRect(previousX, previousY, e.clientX canvas.offsetLeft previousX, e.clientY canvas.offsetTop previousY); previousX = e.clientX canvas.offsetLeft; previousY = e.clientY canvas.offsetTop;}function stopDrawing() { isDrawing = false;}完整代码示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <title>Canvas Scratch Card</title></head><body> <canvas id="scratchCard" width="400" height="400"></canvas> <ｓｃｒｉｐｔ> const canvas = document.getElementById('scratchCard'); const ctx = canvas.getContext('2d'); let bgImage = new Image(); bgImage.src = 'background.jpg'; // 替换为你的图片路径 bgImage.onload = function() { ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height); drawCoverLayer(); }; function drawCoverLayer() { ctx.fillStyle = '#000'; ctx.globalAlpha = 0.6; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalAlpha = 1; // 重置透明度 } let isDrawing = false; let previousX, previousY; canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing); function startDrawing(e) { isDrawing = true; previousX = e.clientX canvas.offsetLeft; previousY = e.clientY canvas.offsetTop; } function draw(e) { if (!isDrawing) return; ctx.clearRect(previousX, previousY, e.clientX canvas.offsetLeft previousX, e.clientY canvas.offsetTop previousY); previousX = e.clientX canvas.offsetLeft; previousY = e.clientY canvas.offsetTop; } function stopDrawing() { isDrawing = false; } </ｓｃｒｉｐｔ></body></html>FAQs
Q1: 如何更换背景图像？
A1: 你只需要修改bgImage.src 的值为你想要的新图片路径即可。bgImage.src = 'new_background.jpg';，确保你的图片文件与 HTML 文件在同一目录下，或者提供正确的相对路径或绝对路径。
Q2: 如何调整覆盖层的透明度和颜色？
A2: 你可以在drawCoverLayer 函数中调整ctx.fillStyle（颜色）和ctx.globalAlpha（透明度），将填充颜色改为蓝色并增加透明度：ctx.fillStyle = 'blue'; 和ctx.globalAlpha = 0.8;。ctx.globalAlpha 的值范围是 0（完全透明）到 1（完全不透明）。
