移动端刮刮乐的实现方式主要涉及到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的事件监听与操作，可以实现简单而有趣的刮刮乐效果。