<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刮刮乐</title>
<style type="text/css">
#c1 {
border: 1px solid blue;
position: absolute;、//生成绝对定位的元素，
}
#c2 {
border: 1px solid red;
}
body {
position: relative;
}
</style>
</head>
<body> <canvas id="c1" width="800px" height="800px">
</canvas>
<canvas id="c2" width="850px" height="850px">
</canvas>
</body>
<script type="text/javascript">
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");
// 绘制图片到底层 canvas2
var imgs = new Image();
imgs.src = 'img/girl.jpg';
imgs.onload = function () {
ctx2.drawImage(this, 0, 0)
}
// 涂层绘制到顶层(即覆盖膜) canvas1
ctx1.fillStyle = "lightgray";
ctx1.fillRect(0, 0, 850, 850);
ctx1.font = "normal 80px 仿宋";
ctx1.strokeStyle = "slateblue";
ctx1.strokeText("请刮开！", 320, 750);
// 监听canvas的onmousedown事件
c1.onmousedown = function (ev) {
c1.onmousemove = function (e) {
console.log(e);
var w = 50;
// 清除区域的宽度
var h = 50;
// 清除区域的高度
var x = e.pageX - c1.offsetLeft - w / 2;
// 清除区域的x位置
var y = e.pageY - c1.offsetTop - h / 2;
// 清除区域的y位置
ctx1.clearRect(x, y, w, h);
}
}
c1.onmouseup = function (ev) { // 取消onmousemove事件
c1.onmousemove = null;
}</script>
</html>??????? 以上代码实现的是一个类似与刮刮乐的小游戏吧，应用的前端知识也很简单，两个画布，一个在底层，一个在上层，鼠标监听事件控制上层的画布，运用算法实现底层画布的展现。在当前路径下的img文件夹下的一个girl.jpg文件是底层文件，可以随意的替换。
实现效果图如下
?