<template>
<div>
<canvas id="c"></canvas>
</div>
</template>
<script>
export default {
data() {
return {
canvas: null,
ctx: null,
chinese: "010110",
font_size: 10,
columns: 0,
drops: [],
};
},
mounted() {
this.canvas = document.getElementById("c");
this.ctx = this.canvas.getContext("2d");
this.initCanvas();
this.initDrops();
setInterval(this.draw, 50);
},
methods: {
initCanvas() {
this.canvas.height = window.innerHeight;
this.canvas.width = window.innerWidth;
this.columns = this.canvas.width / this.font_size;
},
initDrops() {
for (let x = 0; x < this.columns; x++) {
this.drops[x] = 1;
}
},
draw() {
this.ctx.fillStyle = "rgba(0,0,0,0.05)";
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.fillStyle = "#0F0";
this.ctx.font = this.font_size + "px arial";
for (let i = 0; i < this.drops.length; i++) {
const text = this.chinese[Math.floor(Math.random() * this.chinese.length)];
this.ctx.fillText(text, i * this.font_size, this.drops[i] * this.font_size);
if (this.drops[i] * this.font_size > this.canvas.height && Math.random() > 0.975) {
this.drops[i] = 0;
}
this.drops[i]++;
}
},
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: black;
}
canvas {
display: block;
}
</style>
这是一个基本的 Vue.js 组件,它将代码雨动画嵌入到一个 Vue 应用中。在 mounted
钩子中,我们获取了 canvas 元素的上下文,然后创建代码雨并启动动画。你可以将此组件嵌入到你的 Vue.js 应用程序中并进行进一步的自定义。