2022 年 09 月 28 日
大多数的程序员都会有一个自己的个人网站,我们想要在自己的网站下面去刻画一个酷炫的背景,我们可能会使用一些炫酷的图片,或者叠加一个视频背景,亦或是通过css3 来进行手动绘制,这些方案都各有利弊,在出现canvas之后,我们出现了一种新的可能,我们可以通过canvas绘制一些非常炫酷的背景,有意思的是,我们还可以通过鼠标或者键盘事件与其交互,这样,我们就拥有了一种绘制动态背景的能力。
其实它是Html5新增的一个标签,翻译过来就是画布的意思,他就是一张画布,需要开发者们手动绘制,我们如何绘制呢?很明显作为一个标签能力有限,我们需要使用javascript对其进行加工绘制,所以我们很好理解了,canvas是纸,而JavaScript是笔,通过两者的合作才能完成绘制工作。
我们平常用的网页截图、H5游戏、前端动效、可视化图表...,都有canvas 的应用场景,所以其功能是特别强大的,同时其大量的工作都是在GPU当中进行,一般来说性能是很高的,在我们去做一些对性能要求更高的场景下,是一种不错的选择,当然,本次我们不是为了来讲解canvas,这里就不做过多的讲解,接下来我们来进入实战。
完整的代码已经放在文章末尾,可以通过码上掘金直接观看,我们来细聊一下其实现思路和过程,逐步拆解出来,看完相信你也可以轻松绘制出这样的一个效果。
当然最基础的是我们需要一个canvas标签了,所以第一步需要创建一个标签并且给绑定一个id属性方便JavaScript获取到他
有了标签之后,我们需要干嘛呢,总结下来是这几部,获取canvas节点,获取窗口的宽高,给canvas设置宽高,同时拿到其绘制的上下文对象,我们要操作他需要调用其中的各种api方法。
/* 1.获取节点 */
const canvs = document.getElementById('app')
/* 2.设置canvas的宽高 */
({ innerWidth: cvs.width, innerHeight: cvs.height } = window);
/* 3.获取canvans绘制上下文对象 */
const ctx = cvs.getContext('2d');
其次我们是渲染不同的文字,所以我们定义一下我们需要渲染哪些文字,同时,每次渲染的时候,随机获取一个,所以,我们写一个方法,用于每次随机拿到一个文字。
/* 4. 准备一个获取随机文字方法 */
function getRandomChar(){
const str = '码上掘金永远滴神YYDS'
return str[Math.floor(Math.random() * str.length)]
}
我们希望每次绘制的文字颜色也是不同的颜色,所以我们需要准备一个获取随机颜色的方法,相信这里都是很简单的。
/* 5.准备一个获取随机颜色的方法 */
function getRandomColor() {
const colors = [
'#33B5E5',
'#0099CC',
'#AA66CC',
'#9933CC',
'#669900',
'#FFBB33',
'#FF8800',
'#FF4444',
'#CC0000'
]
return colors[Math.floor(Math.random() * colors.length)]
}
有了这些准备工作,下面进入核心的绘制过程,我们继续
有了前面的步骤,我们已经有了基础的一些工具方法准备了,下面我们来开始绘制,在此之前我们需要对其稍微思考一下我们应该怎么做,下面看看这张简单图来理解,我们如果下实现这样的一个效果,我们最基础的是需要啥样的。
/* 6. 设置一列宽度并计算一行需要多少列 */
const columnWidth = 30;
const columnCount = Math.floor(window.innerWidth / columnWidth)
/* 7.开始绘制 */
function draw(){
/* 定义一下字体大小, 同时y坐标每行的所需高度就是字体大小的高度 */
const fontsize = 16;
/* 获取一个随机颜色用于字体绘制 */
ctx.fillStyle = getRandomColor();
/* 设置字体格式和字体大小,这个随意自己设置 */
ctx.font = `${fontsize}px "Microsoft YaHei"`;
/* 循环列数次,同时每次计算出xy的坐标,因为是第一行所以y默认就是 1 * 字体高度 */
for (let i = 0; i < columnCount; i++) {
const x = i * columnWidth;
const y = 1 * fontsize
/* 绘制 三个参数分别是 字符 x坐标 y坐标 */
ctx.fillText(getRandomChar(), x, y)
}
}
当我们完成这个方法之后,我们只需要调用这个方法就可以绘制出一行文字了,例如下图:
/* 6.5 定义一个变量记录所有y轴的绘制次数记录 并让其默认值为1 */
const columnNextIndexs = new Array(columnCount).fill(1)
function draw(){
const fontsize = 16;
ctx.fillStyle = getRandomColor();
ctx.font = `${fontsize}px "Microsoft YaHei"`;
for (let i = 0; i < columnCount; i++) {
const x = i * columnWidth;
/* 每次从记录中拿到y的绘制次数 */
const y = columnNextIndexs[i] * fontsize
ctx.fillText(getRandomChar(), x, y)
/* 每次绘制之后++ */
columnNextIndexs[i]++
}
}
setInterval(()=> draw()},40)
if(y > window.innerHeight){
columnNextIndexs[i] = 1
}
ctx.fillStyle = `rgba(0, 0, 0, 0.1)`;
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
当设置完之后我们就拥有了这样的一个效果了
/* 7.开始绘制 */
function draw(){
ctx.fillStyle = `rgba(0, 0, 0, 0.1)`;
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
const fontsize = 16;
ctx.fillStyle = getRandomColor();
ctx.font = `${fontsize}px "Microsoft YaHei"`;
for (let i = 0; i < columnCount; i++) {
const x = i * columnWidth;
const y = columnNextIndexs[i] * fontsize
/* 只需要加上这一个判断就可以让不同列之间随机回到顶部造成高度差异 */
if(y > window.innerHeight && Math.random() > .9) return columnNextIndexs[i] = 1
ctx.fillText(getRandomChar(), x, y)
columnNextIndexs[i]++
}
}
至此,代码雨的效果及其实现思路已经完成了,按着这样的思路还可以完成很多好玩的好看的东西,你也可以自己调整文字的内容,文字的大小,文字的间隔,文字的背景,等等东西对其进行改变,最终就可以实现一个自己的特殊背景图了,把它放在你的网站做背景图是不是很炫酷呢?最后别忘了你需要使用setInterval不停的调用draw() 方法,当然速度也由你控制。
为了让这个Demo更好玩,我为其增加了一点点交互,我们可以在码上掘金上进行体验,我们说说其实现思路即可:
首先我们绘制的文字是由我们自己提供的一段字符串,我们在其中放置一个input框让后通过修改其内容,就可以实现实时修改代码雨下雨的内容了,因为每次绘制前都会去调用随机读取文字,所以我们只需要改变下读取文字内容就可以在下一次读取的时候从我们输入的新的内容中获取了
我们默认是无序排列的,因为获取文字的时候是随机的,但是看到我们的封面图发现其实我们是有序的,我们如何实现这个功能呢, 那么很明显我们需要在获取文字的时候,按顺序返回文字,但是呢,不同列之间是顺序不同的,我们需要参考最开始对不同列高度差异之间的形式,定义一个数组记录所有列当前的绘制次数,从而按顺序拿到文字,就可以让其看起来更有意思了
更多好玩的东西可以自己思考....
结合以上所有内容,这里提供完整版的代码,大家快来体验吧,在线体验地址: