原生JavaScript实现刮刮乐

关于“原生JavaScript实现刮刮乐”的攻略，我们可以按照以下步骤进行。

1. 准备工作

首先，我们需要在HTML文件中创建一个canvas元素，用于绘制刮去涂层后的图片。示例代码如下：

<canvas id="scratch-card"></canvas>

接下来，我们需要准备两张图片。一张作为底部图片，一张作为刮去涂层后显示的图片。这两张图片的尺寸需要一致，并且我们需要在页面加载完成后才能获取到它们的宽高。为了方便，我们可以使用Image对象动态加载这两张图片，示例代码如下：

const bgImg = new Image();
const img = new Image();
bgImg.src = 'background.jpg';
img.src = 'scratched.jpg';
bgImg.onload = function() {
  // 在这里获取底部图片的宽高
}
img.onload = function() {
  // 在这里获取刮去涂层后显示的图片的宽高
}

2. 绘制刮去涂层

我们需要在canvas中绘制两个图层，一个是底层的图片，另一个是刮去涂层。首先，我们需要将底层图片绘制到canvas中，示例代码如下：

const canvas = document.getElementById('scratch-card');
const ctx = canvas.getContext('2d');
ctx.drawImage(bgImg, 0, 0);

接下来，我们需要绘制刮去涂层。我们可以在canvas中绘制一个矩形，然后使用globalCompositeOperation属性将其与底层图片进行混合，示例代码如下：

const offsetX = canvas.offsetLeft;
const offsetY = canvas.offsetTop;
const lineWidth = 30;
ctx.beginPath();
ctx.fillStyle = 'gray';
ctx.fillRect(offsetX, offsetY, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
canvas.addEventListener('mousemove', function(e) {
  if (e.buttons !== 1) {
    return;
  }
  const x = e.pageX - offsetX;
  const y = e.pageY - offsetY;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(x, y);
  ctx.stroke();
  lastX = x;
  lastY = y;
});

3. 实现刮开效果

在mousemove事件中，我们需要监听鼠标移动事件，根据鼠标位置来刮开涂层。每次鼠标移动时，根据当前鼠标位置和上一个鼠标位置，绘制一条线段，并将其与底层图片进行混合，以达到刮开的效果。代码中的参数lineWidth表示线段的宽度，可以自行调整。

4. 实现重置

我们还需要实现一个重置功能，将涂层还原，示例代码如下：

const resetBtn = document.getElementById('reset-btn');
resetBtn.addEventListener('click', function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(bgImg, 0, 0);
});

示例说明

示例1

假设我们有一张名为background.jpg的图片，和一张名为scratched.jpg的图片，它们的宽高均为500x500像素。我们的目标是在这张图片上实现刮刮乐的效果。可以按照以下步骤进行：

1. 在HTML文件中创建一个canvas元素，用于绘制刮去涂层后的图片。

```html

```

1. 使用Image对象动态加载这两张图片，并在加载完成后获取它们的宽高。

javascript
const bgImg = new Image();
const img = new Image();
bgImg.src = 'background.jpg';
img.src = 'scratched.jpg';
bgImg.onload = function() {
// 在这里获取底部图片的宽高
const canvas = document.getElementById('scratch-card');
canvas.width = bgImg.width;
canvas.height = bgImg.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(bgImg, 0, 0);
}
img.onload = function() {
// 在这里获取刮去涂层后显示的图片的宽高
}

1. 在canvas中绘制刮去涂层，并实现刮开效果。

javascript
const canvas = document.getElementById('scratch-card');
const ctx = canvas.getContext('2d');
const offsetX = canvas.offsetLeft;
const offsetY = canvas.offsetTop;
const lineWidth = 30;
ctx.beginPath();
ctx.fillStyle = 'gray';
ctx.fillRect(offsetX, offsetY, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
let lastX, lastY;
canvas.addEventListener('mousedown', function(e) {
lastX = e.pageX - offsetX;
lastY = e.pageY - offsetY;
});
canvas.addEventListener('mousemove', function(e) {
if (e.buttons !== 1) {
return;
}
const x = e.pageX - offsetX;
const y = e.pageY - offsetY;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
lastX = x;
lastY = y;
});

1. 实现重置功能。

javascript
const resetBtn = document.getElementById('reset-btn');
resetBtn.addEventListener('click', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bgImg, 0, 0);
});

示例2

假设我们有一张名为background.jpg的图片，我们的目标是在这张图片上实现刮刮乐的效果，但是我们的底部图片尺寸过大，超出了canvas的范围，因此需要缩放。可以按照以下步骤进行：

1. 在HTML文件中创建一个canvas元素，用于绘制刮去涂层后的图片。设置canvas的宽高，使其适应容器大小。

```html

```

css
.wrapper {
width: 500px;
height: 400px;
}
canvas {
width: 100%;
height: 100%;
}

1. 使用Image对象动态加载这张图片，并在加载完成后获取它的宽高。计算出需要缩放的比例。

javascript
const bgImg = new Image();
bgImg.src = 'background.jpg';
bgImg.onload = function() {
// 在这里获取底部图片的宽高
const canvas = document.getElementById('scratch-card');
const ctx = canvas.getContext('2d');
const wrapper = document.querySelector('.wrapper');
const scale = Math.min(wrapper.clientWidth / bgImg.width, wrapper.clientHeight / bgImg.height);
const newWidth = bgImg.width * scale;
const newHeight = bgImg.height * scale;
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(bgImg, 0, 0, newWidth, newHeight);
}

1. 在canvas中绘制刮去涂层，并实现刮开效果。

javascript
const canvas = document.getElementById('scratch-card');
const ctx = canvas.getContext('2d');
const offsetX = canvas.offsetLeft;
const offsetY = canvas.offsetTop;
const lineWidth = 30;
ctx.beginPath();
ctx.fillStyle = 'gray';
ctx.fillRect(offsetX, offsetY, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
let lastX, lastY;
canvas.addEventListener('mousedown', function(e) {
lastX = e.pageX - offsetX;
lastY = e.pageY - offsetY;
});
canvas.addEventListener('mousemove', function(e) {
if (e.buttons !== 1) {
return;
}
const x = e.pageX - offsetX;
const y = e.pageY - offsetY;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
lastX = x;
lastY = y;
});

1. 实现重置功能。

javascript
const resetBtn = document.getElementById('reset-btn');
resetBtn.addEventListener('click', function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
});

以上就是“原生JavaScript实现刮刮乐”的完整攻略。