移动端刮刮乐的实现方式（js+HTML5）

移动端刮刮乐的实现方式主要涉及到HTML5的canvas绘图和JavaScript的事件监听与操作，以下是完整攻略的步骤和示例说明。

1. 准备工作

首先需要准备一个空白的canvas画布和一张覆盖画布的图片。可以使用以下HTML代码创建：

<canvas id="canvas" width="300" height="200"></canvas>
<img id="cover" src="cover.jpg" alt="cover" width="300" height="200">

其中，canvas即是画布，用于绘制刮刮乐底图和刮过的内容，cover则是覆盖在画布上的图片，用于模拟刮到时的效果。

2. 绘制刮刮乐底图

使用canvas的2D绘图API可以绘制各种形状、标记和文本等内容。为了实现刮刮乐效果，需要先在画布上绘制一张底图，即被覆盖的图片。代码如下：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const image = new Image();
image.src = "background.jpg";
image.onload = function() {
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
};

其中，canvas和ctx分别是HTML5 Canvas API中的元素和上下文，image则是Canvas API中的Image对象，用于加载底图。

3. 添加事件监听与实现刮除效果

为了实现刮刮乐的效果，需要监听用户的触摸或鼠标移动事件，并在用户触摸或移动时把覆盖画布的部分擦除。

以下是示例代码：

const cover = document.getElementById("cover");
const coverCtx = cover.getContext("2d");
coverCtx.fillStyle = "grey";
coverCtx.fillRect(0, 0, cover.width, cover.height);

let isMouseDown = false;
const clearArea = (x, y) => {
  coverCtx.save();
  coverCtx.beginPath();
  coverCtx.arc(x, y, 50, 0, Math.PI*2);
  coverCtx.clip();
  coverCtx.clearRect(x-50, y-50, 100, 100);
  coverCtx.restore();
};

cover.addEventListener("mousedown", (e) => {
  isMouseDown = true;
  clearArea(e.offsetX, e.offsetY);
});

cover.addEventListener("mousemove", (e) => {
  if(isMouseDown) {
    clearArea(e.offsetX, e.offsetY);
  }
});

cover.addEventListener("mouseup", () => {
  isMouseDown = false;
});

以上代码中，cover和coverCtx分别是覆盖画布和其上下文。当用户在覆盖画布上触摸或拖动时，会调用clearArea函数，对覆盖画布上指定坐标周围的像素进行清除。这里使用Canvas2DContext的arc()方法来绘制一个圆形的擦除区域，并通过clip()方法将该区域设为当前剪辑区域。最后，使用clearRect()方法来清除剪辑区域内的内容。

4. DEMO示例

以下是两个简单的刮刮乐Demo，供参考：

Demo1

Code: https://codepen.io/ronnywang/pen/gOYXJme

Live: https://codepen.io/ronnywang/full/gOYXJme

Demo2

Code: https://codepen.io/xlk_png/pen/eYdarad

Live: https://codepen.io/xlk_png/full/eYdarad

以上就是移动端刮刮乐的实现方式的完整攻略，通过HTML5 Canvas和JavaScript的事件监听与操作，可以实现简单而有趣的刮刮乐效果。