20行JS代码实现网页刮刮乐效果-前端开发

来详细讲解一下！

来详细讲解一下！

1. 网页刮刮乐效果简介

网页刮刮乐效果是一种常用的交互设计，通过刮开图片表面的遮盖层来揭示下面的内容，增加用户参与感和趣味性。使用JS实现刮刮乐效果的方法较为简单且易操作，下面就是具体的攻略。

2. 刮刮乐效果实现步骤

步骤一： HTML结构

<div class="scratch">
  <canvas id="canvas"></canvas>
  <div class="prize">
    <img src="prize.png" alt="奖品">
  </div>
</div>

这段HTML代码中包含刮奖区域的容器盒子以及放奖品图片的div，其中canvas即为涂层蒙版的载体，通过绘制遮盖层来实现刮刮乐效果。

步骤二： CSS样式

.scratch {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
}
.scratch canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.scratch .prize {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

这段CSS样式代码中对容器盒子以及canvas、奖品图片进行了简单的定位和样式设置，借助相对/绝对定位使canvas与奖品图片重合并相互覆盖，实现刮刮乐效果。

步骤三： JS实现

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var radius = 30;

ctx.fillStyle = '#aaa';
ctx.fillRect(0, 0, width, height);

canvas.addEventListener('mousedown', function(e) {
  var loc = windowToCanvas(canvas, e.clientX, e.clientY);
  ctx.globalCompositeOperation = 'destination-out';

  ctx.beginPath();
  ctx.arc(loc.x, loc.y, radius, 0, Math.PI*2, false);
  ctx.fill();

  canvas.addEventListener('mousemove', drawMove);
  canvas.addEventListener('mouseup', drawEnd);
});

function drawMove(e) {
  var loc = windowToCanvas(canvas, e.clientX, e.clientY);

  ctx.beginPath();
  ctx.arc(loc.x, loc.y, radius, 0, Math.PI*2, false);
  ctx.fill();
}

function drawEnd() {
  canvas.removeEventListener('mousemove', drawMove);
  canvas.removeEventListener('mouseup', drawEnd);
}

function windowToCanvas(canvas, x, y) {
  var bbox = canvas.getBoundingClientRect();
  return {
    x: x - bbox.left,
    y: y - bbox.top
  };
}

以上JS代码是实现刮刮乐效果的核心，以下是几个重点说明：

1、画布的初始化

在画布中先填充一层颜色为灰色的矩形作为遮盖层。

2、监听鼠标按下事件

当用户按下鼠标时，获取当前鼠标位置，绘制以此位置为圆心的圆形，圆形半径radius自定义。

3、监听鼠标移动事件

当用户按住鼠标不放移动时，实时监听鼠标位置变化，绘制以鼠标位置为圆心的圆形。

4、监听鼠标抬起事件

当用户抬起鼠标时，取消鼠标移动和抬起事件的监听。

5、坐标转换函数

为了获取鼠标在canvas画布中的坐标，需要定义windowToCanvas函数对鼠标位置进行转换。

步骤四：示例说明

同时，在以上代码的基础上，可以根据实际需求对背景色、画布大小、半径、图片等进行自定义设置，以下两个简单示例：

示例一：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width = 300;
var height = canvas.height = 300;
var radius = 20;

ctx.fillStyle = '#ccc';
ctx.fillRect(0, 0, width, height);

canvas.addEventListener('mousedown', function(e) {
  var loc = windowToCanvas(canvas, e.clientX, e.clientY);
  ctx.globalCompositeOperation = 'destination-out';

  ctx.beginPath();
  ctx.arc(loc.x, loc.y, radius, 0, Math.PI*2, false);
  ctx.fill();

  canvas.addEventListener('mousemove', drawMove);
  canvas.addEventListener('mouseup', drawEnd);
});

function drawMove(e) {
  var loc = windowToCanvas(canvas, e.clientX, e.clientY);

  ctx.beginPath();
  ctx.arc(loc.x, loc.y, radius, 0, Math.PI*2, false);
  ctx.fill();
}

function drawEnd() {
  canvas.removeEventListener('mousemove', drawMove);
  canvas.removeEventListener('mouseup', drawEnd);
}

function windowToCanvas(canvas, x, y) {
  var bbox = canvas.getBoundingClientRect();
  return {
    x: x - bbox.left,
    y: y - bbox.top
  };
}

以上代码是在宽高分别300px的画布中实现刮刮乐效果，背景色为浅灰色，涂层刮除半径radius为20。

示例二：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 400;
var radius = 40;
// 背景
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#f00';
  ctx.globalCompositeOperation = 'destination-out';
};
img.src = 'bg.jpg';

canvas.addEventListener('mousedown', function(e) {
  var loc = windowToCanvas(canvas, e.clientX, e.clientY);

  ctx.beginPath();
  ctx.arc(loc.x, loc.y, radius, 0, Math.PI*2, false);
  ctx.fill();

  canvas.addEventListener('mousemove', drawMove);
  canvas.addEventListener('mouseup', drawEnd);
});

function drawMove(e) {
  var loc = windowToCanvas(canvas, e.clientX, e.clientY);

  ctx.beginPath();
  ctx.arc(loc.x, loc.y, radius, 0, Math.PI*2, false);
  ctx.fill();
}

function drawEnd() {
  canvas.removeEventListener('mousemove', drawMove);
  canvas.removeEventListener('mouseup', drawEnd);
}

function windowToCanvas(canvas, x, y) {
  var bbox = canvas.getBoundingClientRect();
  return {
    x: x - bbox.left,
    y: y - bbox.top
  };
}

以上代码实现了一个宽高分别为600px、400px的画布中刮刮乐效果，画布背景为一张图片，并采用了较大的刮除半径radius为40。