这是我的第一篇博客，闲来无事写一个刮刮乐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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="960" height="1440"></canvas>
		
		<canvas id="c2" width="960" height="1440"></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 = '要刮得图片路径';
		imgs.onload = function(){
			ctx2.drawImage(this,0,0)
		}
		
		// 涂层绘制到顶层(即覆盖膜)  canvas1
		ctx1.fillStyle = "lightgray";
		ctx1.fillRect(0,0,960,1440);
		
		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>

在路径里放上你女朋友的照片，什么你没有女朋友，那你就放上你女神的照片跟她表白，让她成为你女朋友不就行了吗！！！！

放上效果图