canvas实现刮刮卡效果
什么是刮刮卡？
刮刮卡是一种常见的促销活动，其工作原理是将一层覆盖在上面的可刮掉的涂层制成卡，顾客购买后刮去涂层，可以看到下面的文字或图案并兑换相应的奖品或优惠券。它可以吸引顾客的兴趣，促进销售。
在网页中，我们可以使用 Canvas 技术来实现刮刮卡的效果。
Canvas 简介
Canvas 是 HTML5 中的一个新元素，它可以用 JavaScript 来绘制 2D 和 3D 图形。Canvas 能够在浏览器中无缝地渲染图形，可以用于制作动态图像和动画。在使用 Canvas 绘图之前，需要先声明一个 canvas 元素。
<canvas id="myCanvas" width="500" height="500"></canvas>
上面的代码创建一个 id 为 myCanvas 的 Canvas 元素，宽度为 500 像素，高度为 500 像素。接下来，我们可以使用 JavaScript 创建一个上下文对象来绘制图形。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
在上面的代码中，ctx 就是上下文对象，我们可以用 ctx 来绘制图形。
Canvas 绘制基本图形
在 Canvas 中，我们可以使用一些基本的命令来绘制图形，如下所示。
1. 绘制直线：
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 50);
ctx.stroke();
上面的代码绘制了一条从 (0, 0) 点到 (50, 50) 点的直线。
2. 绘制矩形：
ctx.rect(10, 10, 50, 50);
ctx.stroke();
上面的代码绘制了一个左上角坐标为 (10, 10)，宽度为 50，高度为 50 的矩形。
3. 绘制圆形：
ctx.beginPath();
ctx.arc(50, 50, 30, 0, 2 * Math.PI);
ctx.stroke();
上面的代码绘制了中心坐标为 (50, 50)，半径为 30 的圆形。
使用 Canvas 实现刮刮卡效果
下面我们就来使用 Canvas 实现刮刮卡效果。我们先创建一个 Canvas 元素和一个按钮，按钮上的文字用来表示刮掉涂层后应该显示的内容。
<canvas id="myCanvas" width="300" height="150"></canvas>
<button onclick="scratch()">刮一刮</button>
<p id="result"></p>
接下来我们需要准备一张图片，把它作为刮刮卡的底部。
var img = new Image();
img.src = 'image.jpg';
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
在上面的代码中，我们创建了一个 Image 对象，并设置它的 src 属性。当图片加载完成后，我们使用 drawImage 方法将它画在 Canvas 上。
接下来，我们需要绘制一个涂层，用来遮挡底部的图片。
var scratch = function () {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
我们使用 fillRect 方法绘制一个填充颜色为灰色的矩形，大小和 Canvas 一样。
接下来，我们使用一个事件监听器来监听鼠标移动事件，在鼠标移动时刮掉涂层。
var isScratching = false;
var scratch = function () {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.addEventListener('mousedown', function () {
isScratching = true;
});
canvas.addEventListener('mousemove', function (e) {
if (isScratching) {
ctx.clearRect(e.offsetX - 10, e.offsetY - 10, 20, 20);
}
});
canvas.addEventListener('mouseup', function () {
isScratching = false;
if (checkResult(ctx)) {
document.getElementById('result').innerText = '恭喜你，中奖了！';
} else {
document.getElementById('result').innerText = '很遗憾，未中奖。';
}
});
}
在上面的代码中，我们先创建了一个变量 isScratching 来表示是否正在刮刮卡。在鼠标按下时，设置 isScratching 为 true。在鼠标移动时，如果 isScratching 为 true，就使用 clearRect 方法清除相应的位置。最后，在鼠标抬起时，判断是否中奖，并显示相应的信息。
最后，我们来实现 checkResult 方法，用来判断是否中奖。
var checkResult = function (ctx) {
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var count = 0;
for (var i = 0; i < data.length; i += 4) {
if (data[i] == 0 && data[i + 1] == 0 && data[i + 2] == 0 && data[i + 3] == 0) {
count++;
}
}
return count >= canvas.width * canvas.height * 0.5;
}
在上面的代码中，我们先使用 getImageData 方法获取 Canvas 上的所有像素数据。然后，遍历所有像素数据，计算出涂层被刮开的像素数。最后，判断涂层被刮开的像素数是否达到了一半，如果达到了，就返回 true，表示中奖了，否则返回 false，表示未中奖。
现在，我们就完成了一个简单的刮刮卡效果。
总结
本文介绍了如何使用 Canvas 实现刮刮卡效果。我们创建了一个 Canvas 元素，并绘制了底部的图片和涂层。接着，我们使用鼠标移动事件动态刮掉了涂层，并判断是否中奖。最后，我们实现了一个 checkResult 方法来判断是否中奖。