<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>404</title>
<link rel="shortcut icon" href="img/cat.ico">
<meta name="referrer" content="no-referrer">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1,maximum-scale=1">
<meta HTTP-EQUIV="pragma" content="no-cache">
<meta HTTP-EQUIV="Cache-Control" content="no-cache, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta HTTP-EQUIV="expires" content="0">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<style>
html,body {
margin:0;
padding:0;
}
canvas {
display:block;
}
</style>
</head>
<body onclick="homePage();" style="cursor: pointer;">
</body>
<script>
var canvas = document.createElement('canvas');
var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgba(255, 255, 0, 1)";
document.body.appendChild(canvas);
function random(min,max)
{
return Math.random()*(max-min+1)+min;
}
function range_map(value,in_min, in_max, out_min, out_max) {
return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
var word_arr = [];
var txt_min_size = 5;
var txt_max_size = 25;
var keypress = false;
var acclerate = 2;
for (var i = 0; i < 25; i++) {
word_arr.push({
x : random(0,width),
y : random(0,height),
text : '请联系管理员！',
size : random(txt_min_size,txt_max_size)
});
word_arr.push({
x : random(0,width),
y : random(0,height),
text : '什么都没有了',
size : random(txt_min_size,txt_max_size)
});
word_arr.push({
x : random(0,width),
y : random(0,height),
text : '点击屏幕返回首页！',
size : random(txt_min_size,txt_max_size)
});
word_arr.push({
x : random(0,width),
y : random(0,height),
text : '404 not found',
size : random(txt_min_size,txt_max_size)
});
word_arr.push({
x : random(0,width),
y : random(0,height),
text : '页面找不到了！',
size : random(txt_min_size,txt_max_size)
});
word_arr.push({
x : random(0,width),
y : random(0,height),
text : '哇哦！404！',
size : Math.floor(random(txt_min_size,txt_max_size))
});
}
function render()
{
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0,0,width,height);
ctx.fillStyle = "#fff";
for (var i = 0; i < word_arr.length; i++) {
ctx.font = word_arr[i].size+"px sans-serif";
var w = ctx.measureText(word_arr[i].text);
ctx.fillText(word_arr[i].text,word_arr[i].x,word_arr[i].y);
if(keypress)
{
word_arr[i].x += range_map(word_arr[i].size,txt_min_size,txt_max_size,2,4) * acclerate;
}
else {
word_arr[i].x += range_map(word_arr[i].size,txt_min_size,txt_max_size,2,3);
}
if(word_arr[i].x >= width)
{
word_arr[i].x = -w.width*2;
word_arr[i].y = random(0,height);
word_arr[i].size = Math.floor(random(txt_min_size,txt_max_size));
}
}
ctx.fill();
requestAnimationFrame(render);
}
render();
window.addEventListener('keydown',function(){
keypress = true;
},true);
window.addEventListener('keyup',function(){
keypress = false;
},true);
function homePage(){
alert("弹出信息");
}
</script>
</html>
