预览地址: https://www.fyovo.com/404page
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>404页未找到</title> <style> html,body { margin:0; padding:0; } canvas { display:block; } </style> </head> <body> <div></div> <script> var canvas = document.createElement('canvas'); var height = canvas.height = window.innerHeight; var width = canvas.width = window.innerWidth; var ctx = canvas.getContext('2d'); 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 : '完了, 404了', 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 : '这输入的Url太有想象力了...', size : random(txt_min_size,txt_max_size) }); word_arr.push({ x : random(0,width), y : random(0,height), text : '404 Not Found', 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); </script> <script language="javascript" type="text/javascript"> var i = 5; var intervalid; intervalid = setInterval("fun()", 1000); function fun() { if (i == 0) { window.location.href = "/"; clearInterval(intervalid); } i--; } </script> </body> </html>
备忘用.