仿bilibili弹幕样式的404页面
时间:2022-07-25
本文章向大家介绍仿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>
- Isolation Forest算法实现详解
- css继承样式怎么控制?用选择器
- wordpress站内搜索结果页URL伪静态如何操作
- 如何实现大图居中超过的部分两边自动隐藏
- Ubuntu16.04安装后开发环境配置和常用软件安装
- wordpress如何屏蔽wp-json(禁用REST API)
- 贝叶斯系列——贝叶斯与其他统计流派的区别和联系
- bootstrap tab切换如何让鼠标移动自动切换内容
- css自动换行如何设置?url太长会撑开页面
- Histogram of Oriented Gridients(HOG) 方向梯度直方图
- 动态规划系列之最长递增子序列问题解答
- Git SSH Key 生成步骤
- 如何将wordpress所有文章批量改为已发布状态
- dedecms提取某栏目及子栏目名称到首页怎么弄
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python argparse 模块
- 3分钟快速搭建 linux 虚拟环境
- 每日一题:如何实现异步任务处理来解决耗时操作问题
- 每日一题:如何查看端口占用及相关命令介绍
- 每日一题:最大堆的实现
- 每日一题:什么是子网掩码
- ConstraintLayout优势在哪
- 聊聊claudb的MasterReplication
- R语言中的Theil-Sen回归分析
- R语言关于回归系数的解释
- R语言对二分连续变量进行逻辑回归数据分析
- SAS中用单因素ANOVA研究不同疗法对焦虑症的有效性
- R语言逻辑回归预测分析付费用户
- R语言中使用多重聚合预测算法(MAPA)进行时间序列分析
- R语言中的岭回归、套索回归、主成分回归:线性模型选择和正则化