仿bilibili弹幕样式的404页面
群友发的
预览：
请输入图片描述
源码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面不翼而飞！</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 : '出大问题！',
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',
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>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读