-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
109 lines (108 loc) · 3.14 KB
/
404.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>404</title>
<style>
* {
margin: 0; padding: 0;
}
body {
background: #ccc;
font: 14px/1.4 Microsoft YaHei,SimSun,Arial;
}
h2 {
margin: 20px auto;
text-align: center;
}
p {
margin: 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>Oops, 404</h2>
<p>Sorry, 找不到你想要的页面<p>
<a href="http://lhzqwe.github.io/">返回首页</a>
<canvas id="canvas" style="/*border:1px solid #aaa;*/display:block;margin:50px auto;box-shadow:0px 0px 4px 0px rgba(0,0,0,0.4);">
当前浏览器不支持Canvas，请更换浏览器后再试！
</canvas>
<script>
var searchLight={x:400,y:400,radius:150,vx:Math.random()*5+10,vy:Math.random()*5+10};
var rot=0;
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=600;
canvas.height=600;
if(canvas.getContext){
var context=canvas.getContext("2d");
setInterval(
function(){
draw(context);
update(canvas.width,canvas.height);
},
40
);
}
}
function draw(cxt){
var canvas=cxt.canvas;
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.save();
cxt.beginPath();
cxt.fillStyle="rgba(0,0,0,1)";
cxt.fillRect(0,0,canvas.width,canvas.height);
cxt.beginPath();
// cxt.arc(searchLight.x,searchLight.y,searchLight.radius,0,2*Math.PI);
cxt.save();
cxt.translate(searchLight.x,searchLight.y);
cxt.rotate(rot/180*Math.PI);
cxt.scale(searchLight.radius,searchLight.radius);
starPath(cxt);
cxt.fillStyle="#fff";
cxt.fill();
cxt.restore();
cxt.clip();
cxt.font="bold 100px Arial";
cxt.textAlign="center";
cxt.textBaseline="middle";
cxt.fillStyle="#058";
cxt.fillText("WHAT",canvas.width/2,canvas.height/4);
cxt.fillText("YOU",canvas.width/2,canvas.height/2);
cxt.fillText("WANT",canvas.width/2,canvas.height*3/4);
cxt.restore();
}
function update(canvasWidth,canvasHeight){
rot+=2;
searchLight.x+=searchLight.vx;
searchLight.y+=searchLight.vy;
if(searchLight.x-searchLight.radius<=0){
searchLight.vx=-searchLight.vx;
searchLight.x=searchLight.radius;
}
if(searchLight.x+searchLight.radius>=canvasWidth){
searchLight.vx=-searchLight.vx;
searchLight.x=canvasWidth - searchLight.radius;
}
if(searchLight.y-searchLight.radius<=0){
searchLight.vy=-searchLight.vy;
searchLight.y=searchLight.radius;
}
if(searchLight.y+searchLight.radius>=canvasHeight){
searchLight.vy=-searchLight.vy;
searchLight.y=canvasHeight - searchLight.radius;
}
}
function starPath(cxt){
cxt.beginPath();
for (var i = 0; i < 5; i++) {
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),-Math.sin((18+i*72)/180*Math.PI));
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5);
}
cxt.closePath();
cxt.stroke();
}
</script>
</body>
</html>