推荐阅读
404页面是当用户访问的网页不存在时，服务器返回的HTTP404状态码对应的错误提示页面。
其核心价值在于通过技术手段和用户友好设计，解决“页面不存在”问题对用户体验和网站健康的影响。
具体来说，自定义404页面通过友好的设计缓解挫败感，延长用户在站内的停留时间，同时向搜索引擎明确标识“页面不存在”，避免死链被持续抓取，从而保护网站权重。
今天，小刘就为大家分享一段使用Canvas绘制的暗色系404单页HTML代码。
效果预览
代码部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" href="404.png" type="image/x-icon">
<title>404 页面未找到</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #0a192f;
}
canvas {
display: block;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
z-index: 1;
}
h1 {
font-size: 8em;
margin: 0;
text-shadow: 3px 3px 0 #1e4d8c;
}
a {
color: #64b5f6;
text-decoration: none;
border-bottom: 2px solid;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="content">
<h1>404</h1>
<p>您访问的页面已消失在深海之中</p>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 粒子系统参数
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random() * 2;
this.speed = Math.random() * 0.5 + 0.2;
this.angle = Math.random() * Math.PI * 2;
this.color = `hsl(${200 + Math.random()*40}, 70%, 60%)`;
}
update() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {
this.reset();
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 创建粒子群
const particles = Array(150).fill().map(() => new Particle());
// 动画循环
function animate() {
ctx.fillStyle = 'rgba(10, 25, 47, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
