推荐阅读
403错误（HTTP 403 Forbidden）表示服务器理解请求，但拒绝执行。
今天，小刘就为大家分享一段使用Canvas绘制的绿色护眼403单页HTML代码。
效果预览
代码部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" href="403.png" type="image/x-icon">
<title>403 禁止访问</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #1a2f1a;
font-family: 'Arial', sans-serif;
}
#canvas {
display: block;
}
.error-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #e8f5e9;
z-index: 1;
}
h1 {
font-size: 6em;
margin: 0;
text-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}
p {
font-size: 1.2em;
margin: 20px 0;
}
a {
color: #a5d6a7;
text-decoration: none;
border-bottom: 2px solid;
transition: color 0.3s;
}
a:hover {
color: #4caf50;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="error-content">
<h1>403</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;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 粒子系统参数
const particles = [];
const particleCount = 150;
const colors = ['#2c5530', '#3d8b40', '#4caf50', '#81c784', '#a5d6a7'];
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * 2 - 1;
this.speedY = Math.random() * 2 - 1;
this.color = colors[Math.floor(Math.random() * colors.length)];
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x > canvas.width + 5 || this.x < -5 ||
this.y > canvas.height + 5 || this.y < -5) {
this.reset();
}
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// 初始化粒子系统
function initParticles() {
for (let i = 0; i < particleCount; i++) {
particles.push(new Particle());
}
}
// 背景渐变动画
function createGradient() {
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#1b5e20');
gradient.addColorStop(1, '#388e3c');
return gradient;
}
// 主动画循环
function animate() {
ctx.fillStyle = createGradient();
ctx.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
requestAnimationFrame(animate);
}
// 添加画布交互动画
canvas.addEventListener('mousemove', (e) => {
particles.forEach(particle => {
const dx = e.clientX - particle.x;
const dy = e.clientY - particle.y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 100) {
particle.x += dx * 0.01;
particle.y += dy * 0.01;
}
});
});
initParticles();
animate();
</script>
</body>
</html>
