直接上源码吧，作为一个新手，玩一玩开心就好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rain</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
#canvas {
margin:0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width='300px' height="200px">
Your browser doesn't support the canvas'.
</canvas>
<script type="text/javascript">
// 可设置 density = 1, 帮助理解代码原理
const config = {
// 背景初始值
background: 'rgba(0,0,0,0.1)',
// 字体
font_size: 16,
// 字体 css 属性
font: '16px arial',
// 字体色
color: '#0F0',
// 展示的字体数组
charsArr: '0123456789qwertyuiopasdfghjklzxcvbnm'.split(''),
// 消失率阈值, 可以调整 density 来调整密度
density: 0.95,
// 获取随机字符
randomChar: (chars) => {
return chars[Math.floor(Math.random() * chars.length)]
},
}
// 初始化 dom, 绘图上下文 context, 存储数据的'筛子' boult
const init = () => {
const canvas = document.querySelector('canvas')
canvas.width = screen.width
canvas.height = screen.height
let columns = Math.floor(canvas.width / config.font_size)
let boult = new Array(columns).fill(1)
// 全屏事件绑定
canvas.addEventListener('click', () => {
if(canvas.webkitRequestFullScreen){
canvas.webkitRequestFullScreen()
}else if(canvas.mozRequestFullScreen){
canvas.mozRequestFullScreen()
}else if(canvas.requestFullScreen){
canvas.requestFullscreen()
}else{
console.log("your bowser doesn't support fullscr.")
}
})
const context = canvas.getContext('2d')
return {
canvas, context, boult
}
}
const draw = (canvas, context, boult) => {
const { background, color, font_size, font, charsArr, density } = config
// 函数分开取, 不然代码多了分不清
const { randomChar } = config
// 不断绘制透明度为0.1的长方形实现由灰变黑的过程，同时之前的字也会逐渐被覆盖，然后消失
context.fillStyle = background
context.fillRect(0, 0, canvas.width, canvas.height)
context.fillStyle = color
context.font = font
for(let i = 0; i < boult.length; i++) {
let text = randomChar(charsArr)
let posX = i*font_size
let posY = boult[i]*font_size
context.fillText(text, posX, posY)
if(posY > canvas.height || Math.random() > density) {
//超出屏幕或者产生随机数超过density即重置这一个字符到初始位置
boult[i] = 0
}
// 实现下滑
boult[i]++
}
}
const __main = () => {
const { canvas, context, boult } = init()
setInterval(()=>{
draw(canvas, context, boult)
}, 1000/40)
}
__main()
</script>
</body>
</html>
网友评论