canvas实现数字雨

闲来无事，用js实现了一波数字雨，效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*, body {margin: 0;padding: 0;}body {overflow: hidden;}canvas {background-color: #000;}</style>
</head>
<body><canvas id="canvas" style="background-color: #000;"></canvas>
</body>
<script>const canvasEl = document.getElementById('canvas')const ctx = canvasEl.getContext('2d')const canvasWidth = window.innerWidthconst canvasHeight = window.innerHeightcanvasEl.width = canvasWidthcanvasEl.height = canvasHeightif (ctx) {let aryData = []const fontSize = [8, 24]const [minFontSize, maxFontSize] = fontSizeconst compareVal = 0.5const maxShowCnt = 200const fontVerticalMargin = [5, 30]const [minFontVerticalMargin, maxFontVerticalMargin] = fontVerticalMarginconst speed = 3000 / 40this.timer = setInterval(() => {aryData = aryData.slice(0, maxShowCnt)ctx.clearRect(0, 0, canvasWidth, canvasHeight)const emptyIndex = aryData.findIndex(item => item.list.every(e => e === ''))!!~emptyIndex && aryData.splice(emptyIndex, 1)const randomVal = Math.random()const createNewRandomData = () => parseInt(String(Math.random() * 10))const addNewData = target => target.unshift(createNewRandomData())const updateRowData = ({ index, list, length }) => {for (let i = index; i > 0; i--) {list[i] = list[i - 1]}if (index < length - 1) {list[0] = createNewRandomData()} else {list[0] = ''}}if (randomVal > compareVal) {const fontSize = minFontSize + Math.ceil((maxFontSize - minFontSize) * Math.random())const fontVerticalMargin = minFontVerticalMargin + Math.ceil((maxFontVerticalMargin - minFontVerticalMargin) * Math.random())aryData.push({list: [createNewRandomData()],fontSize: fontSize,fontVerticalMargin: fontVerticalMargin,length: Math.ceil(canvasHeight / (fontSize + fontVerticalMargin)),x: canvasWidth * Math.random(),index: 1})}aryData.forEach(item => {if (item.index === 0) {addNewData(aryData.list)item.index++} else if (item.index <= item.length - 1) {updateRowData(item)item.index++} else {item.index--}item.list.forEach((colItem, colIndex) => {ctx.fillStyle = `rgba(255, 255, 0, ${ parseFloat(Math.abs(1 - (colIndex - 1 - colIndex / 8) / colIndex).toFixed(1)) })`ctx.font = `${item.fontSize}px Microsoft YaHei`ctx.fillText(colItem, item.x, (item.fontSize + item.fontVerticalMargin) * colIndex)})})}, speed)}
</script>
</html>

canvas实现数字雨相关推荐

canvas黑客帝国数字雨背景 html+css+js
效果(完整源码在最后): [html+css+js]黑客帝国数字雨源码分享可拿来作页面背景制作: 定义canvas标签: <canvas id="canvas">& ...
canvas+gif.js打造自己的数字雨头像
前言昨天是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像?.你看我的头像牛逼不.今天介绍一个小demo,上传一个静态头像,就能得到一个动态的数字雨头像 ...
【炫酷秀】仅用4行代码再现《黑客帝国》数字雨，可立即在终端实现！
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 提到<黑客帝国>,字符雨可谓是让人印象深刻. 这种科技感爆棚的特效,你 ...
4行代码再现《黑客帝国》数字雨，在终端实现的那种
十三发自凹非寺量子位报道 | 公众号 QbitAI 提到<黑客帝国>,字符雨可谓是让人印象深刻. 这种科技感爆棚的特效,你是否也想来一套? 这个,可以有. 最近,名叫akinomy ...
python命令数字雨_用Python实现黑客帝国代码雨效果（3种方式）
说起电影<黑客帝国>,相信大部分人都看过或听说过,影片中有一个场景数字雨,如果你看过电影的话,应该对这个经典场景印象深刻,本文我们利用 Python 以数字.字母.图片三种形式来实现这一效 ...
用javascript实现数字雨
数字雨这个东西,无数人写过了,我这个是上课无聊写的版本,纯属娱乐,没有经过性能优化的版本. 和别人不太一样的是我这个版本用了ascii码,数字会变化,就是性能不佳,懒得优化. 和之前的太阳系模型.小人 ...
C语言项目：黑客帝国之数字雨
编辑相信大家看过许许多多的关于计算机黑客.骇客.人工智能.AI方面的电影,每当黑客入侵某个五角大楼,某个网站时,都会出现这样一幅画面: 编辑然后就轻而易举的成功入侵夺取管理员权限了,这时候的我们, ...
【黑客帝国数字雨屏保】基于Win32的黑客帝国数字雨屏幕保护程序（附VS工程代码文件和可执行文件）
运行效果代码结构 //黑客帝国数字雨花心胡萝卜 #包含 <windows.h> #包含 <stdlib.h>#define 时钟编号 1 #define 最大长度 25 / ...
手机数字雨_cmd命令如何实现数字雨的效果
cmd命令是一款可以实现各种操作的电脑命令,很多的小伙伴们最近都在问cmd命令如何实现数字雨的效果?今天小编就为大家带来了cmd命令数字雨教程,感兴趣的话就一起来看看吧. cmd命令数字雨教程: 1. ...
Java实现简单的数字雨
package com.example.day03; /* 数字雨*/ import java.util.Random;public class RandomNum {public static vo ...

canvas实现数字雨

canvas实现数字雨相关推荐

最新文章

热门文章