/**
|
雪花特效
|
*/
|
|
<template>
|
<canvas ref="canvas" class="canvas"></canvas>
|
</template>
|
<script>
|
|
class Snowflake {
|
constructor(x, y, speed, radius) {
|
this.x = x;
|
this.y = y;
|
this.speed = speed;
|
this.radius = radius;
|
}
|
update() {
|
this.y += this.speed;
|
if (this.y > window.innerHeight) {
|
this.y = -this.radius;
|
}
|
}
|
draw(ctx) {
|
ctx.beginPath();
|
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
ctx.fillStyle = '#fff';
|
ctx.fill();
|
}
|
}
|
export default {
|
data() {
|
return {
|
snowflakes: [],
|
};
|
},
|
mounted() {
|
this.canvas = this.$refs.canvas;
|
this.ctx = this.canvas.getContext('2d');
|
this.canvas.width = window.innerWidth;
|
this.canvas.height = window.innerHeight;
|
window.addEventListener('resize', () => {
|
this.canvas.width = window.innerWidth;
|
this.canvas.height = window.innerHeight;
|
});
|
this.animate();
|
},
|
methods: {
|
animate() {
|
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
if (Math.random() < 0.05) {
|
const x = Math.random() * window.innerWidth;
|
const y = -10;
|
const speed = Math.random() * 3 + 1;
|
const radius = Math.random() * 3 + 1;
|
this.snowflakes.push(new Snowflake(x, y, speed, radius));
|
}
|
this.snowflakes.forEach((snowflake) => {
|
snowflake.update();
|
snowflake.draw(this.ctx);
|
});
|
requestAnimationFrame(this.animate);
|
},
|
},
|
};
|
</script>
|
<style>
|
.canvas {
|
position: fixed;
|
top: 0;
|
left: 0;
|
background-color: #16222a;
|
z-index: 9999;
|
}
|
</style>
|
|
