功能记录:在vue中通过canvas实现类似于CSDN的代码雨特效
- 需要在项目中安装canvas后使用,功能可参考canvas官网。
<template>
<div>
<canvas id="canvas" class="canvas" />
</div>
</template>
<script>
export default {
mounted() {
this.initCodeRain()
},
methods: {
initCodeRain() {
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const fontSize = 16
const fontFamily = 'Monospace'
const color = 'rgba(255, 255, 255, 0.7)'
const chars = '0123456789'
let droplets = []
function initDroplets() {
for (let i = 0; i < 100; i++) {
droplets.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
char: chars[Math.floor(Math.random() * chars.length)],
speed: 1 + Math.random() * 2,
alpha: 1,
})
}
}
function updateAndDraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
for (let i = 0; i < droplets.length; i++) {
const droplet = droplets[i]
droplet.y += droplet.speed
droplet.alpha -= 0.003
if (droplet.y > canvas.height || droplet.alpha <= 0) {
droplet.y = Math.random() * -canvas.height
droplet.alpha = 1
}
ctx.font = `${fontSize}px ${fontFamily}`
ctx.fillStyle = `rgba(0, 255, 255, ${droplet.alpha})`
droplet.char =
Math.random() < 0.1
? chars[Math.floor(Math.random() * chars.length)]
: droplet.char
ctx.fillText(droplet.char, droplet.x, droplet.y + fontSize)
let num = Math.random() * 20
for (let j = 0; j < num; j++) {
ctx.fillStyle = `rgba(0, 255, 255, ${droplet.alpha - (j * 0.001 * num) / 10
})`
droplet.char =
Math.random() < 0.2
? chars[Math.floor(Math.random() * chars.length)]
: droplet.char
ctx.fillText(
droplet.char,
droplet.x,
droplet.y + fontSize - j * fontSize
)
}
}
requestAnimationFrame(updateAndDraw)
}
initDroplets()
updateAndDraw()
},
}
}
</script>
<style lang="scss" scoped>
.canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
z-index: 0;
}
</style>