当用户访问网站中不存在的页面时,通常会显示一个404错误页面。为了增加页面的趣味性和互动性,我们可以在404页面中添加一些动态效果,比如利用Canvas制作一个雪花屏版的404页面。
以下是实现过程:
1. 创建HTML文件
首先需要创建一个HTML文件,并在文件中添加一个canvas
元素和一个提示信息。如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404 Not Found</title>
<style>
body {
text-align: center;
background-color: #f2f2f2;
}
canvas {
display: block;
margin: 0 auto;
width: 80%;
height: 80%;
}
h1 {
margin-top: 50px;
font-size: 32px;
color: #333;
}
</style>
</head>
<body>
<canvas id="snow"></canvas>
<h1>Oops!页面不存在,请返回首页继续浏览。</h1>
<script src="app.js"></script>
</body>
</html>
2. 编写JS代码
接下来我们需要编写JS代码,通过Canvas绘制雪花效果。
首先需要获取canvas
元素和画布上下文对象:
const canvas = document.getElementById('snow');
const ctx = canvas.getContext('2d');
接着需要创建雪花对象:
class SnowFlake {
constructor() {
this.x = Math.random() * canvas.width; // 雪花出现的水平位置
this.y = -10; // 雪花出现的垂直位置
this.radius = Math.random() * 3 + 2; // 雪花半径,随机大小
this.drift = Math.random() * 0.5 - 0.25; // 雪花的横向飘移量,随机值
this.speed = Math.random() * 2 + 1; // 雪花的下落速度,随机值
}
draw() {
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fill();
}
update() {
// 更新雪花位置
this.x += this.drift;
this.y += this.speed;
}
outOfScreen() {
// 雪花是否超出画布范围
return this.y > canvas.height + this.radius ||
this.x < -this.radius ||
this.x > canvas.width + this.radius;
}
}
在初始化时,以某些规则生成多个雪花对象,并将其放入一个数组中:
const snowflakes = [];
// 生成雪花
for (let i = 0; i < 50; i++) {
snowflakes.push(new SnowFlake());
}
然后在画布上循环绘制雪花,并更新每个雪花的坐标。每次绘制后还需要判断雪花是否超出画布范围,以便在需要时将其从数组中移除。
function drawSnow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snowflakes.forEach((snowflake) => {
snowflake.draw();
snowflake.update();
if (snowflake.outOfScreen()) {
// 雪花超出屏幕范围时从数组中移除
const index = snowflakes.indexOf(snowflake);
snowflakes.splice(index, 1);
snowflakes.push(new SnowFlake());
}
});
}
setInterval(drawSnow, 20);
以上代码将会在页面上生成一堆不断下落的雪花,已经初步实现了雪花屏版的404页面效果。
示例1
我们将上面的代码保存为app.js文件,放在与html文件同一个目录下。在浏览器中打开该HTML文件,我们就可以看到一个生成的雪花屏版的404页面。
示例2
我们还可以通过改变canvas的一些属性来实现不同的雪花效果。例如,可以将雪花的颜色改为蓝色,将背景颜色改为黑色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404 Not Found</title>
<style>
body {
text-align: center;
background-color: #000;
}
canvas {
display: block;
margin: 0 auto;
width: 80%;
height: 80%;
}
h1 {
margin-top: 50px;
font-size: 32px;
color: #fff;
}
</style>
</head>
<body>
<canvas id="snow"></canvas>
<h1>页面不见了,请返回首页</h1>
<script src="app.js"></script>
</body>
</html>
class SnowFlake {
constructor() {
this.x = Math.random() * canvas.width;
this.y = -10;
this.radius = Math.random() * 3 + 2;
this.drift = Math.random() * 0.5 - 0.25;
this.speed = Math.random() * 2 + 1;
}
draw() {
ctx.beginPath();
ctx.fillStyle = 'blue'; // 雪花颜色设置为蓝色
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
ctx.fill();
}
update() {
this.x += this.drift;
this.y += this.speed;
}
outOfScreen() {
return this.y > canvas.height + this.radius ||
this.x < -this.radius ||
this.x > canvas.width + this.radius;
}
}
const snowflakes = [];
for (let i = 0; i < 50; i++) {
snowflakes.push(new SnowFlake());
}
function drawSnow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snowflakes.forEach((snowflake) => {
snowflake.draw();
snowflake.update();
if (snowflake.outOfScreen()) {
const index = snowflakes.indexOf(snowflake);
snowflakes.splice(index, 1);
snowflakes.push(new SnowFlake());
}
});
}
setInterval(drawSnow, 20);
以上就是利用Canvas制作雪花屏版404页面的详细攻略,希望对你有所帮助!
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Canvas如何做个雪花屏版404的实现 - Python技术站