Canvas粒子时间

Posted 2021-04-30 重大开发者

隔日一说

你值得拥有

各位骚年，与其大家在寝室李聚众开黑，不如来此观看网协大佬的新作，在这里你可以收获到最新的网页设计，在同学面前装一波，还在等什么，赶快来观摩吧！

现在人们的审美都比较倾向于更加炫酷，对于普普通通的太过平常的东西几乎很难提起人们的兴趣，所以今天我给大家来一个比较炫酷比较新颖的网页技术canvas。

哇，我开始兴奋的停不下来了，谁都拦不住我

很多编程语言，他们都开发了自己的画图方法（比如Python的小乌龟等等），html虽然是一个很基础的超文本语言，但是为了时网页效果更加美观，使开发者更加多样的实际网页效果，HTML5也提供了支持画图的方法canvas，也许大家会认为一个画图方法就是在网页上面进行一些规则图形的操作，并不是很炫酷，但是对于HTML5的canvas可不仅是在网页上画一些圆或矩形什么的，用它可以实现一些非常具有审美价值的效果，canvas可以将图片链接到画布上在对这张图片进行操作，canvas可以获取这张图片上每个点的rgba值（既颜色值），你可以按照自己的爱好对他们进行操作，你可以选择其中红色部分的显示，或者可以选择间隔几个点显示（用这种方法就可以在网页上实现炫酷的粒子效果。

现在我就用一个比较炫酷的粒子时间案例来给大家讲一下canvas的用法，首先canvas是一个HTML标签，我们需要在HTML文件里面创建一个canvas对象，过后再用js对canvas对象进行操作。

案例demo：www.rswghb.cn/time.

First

 

这就是我在canvas中创建的一个canvas对象，在这个HTML文件里面，我对布局做了一些设定，并且引入了两个js文件，zhuzu.js文件是用来定义一个三维数组（具体作用后面会讲到），canvas.js当然就是用来操作canvas对象的js代码了。

 

Second

创建一个canvas.js 文件，在这个文件里面才能具体地对在HTML文件里面创建的canvas对象进行操作，首先需要先获取到canvas对象

第一行代码就可以通过ID来获取到canvas对象，而第二行代码是获取到canvas的操作方法，这行代码时必须的，不然无法操作canvas对象

Third

现在需要先分析一下我们怎么才能实现这个粒子时间效果，这个效果是通过很多的粒子小球拼凑成的时间，所以我们首先需要设置好用小球来刻画数字，所以这里就用到了我在第一步提到的shuzu.js文件了，我们可以将0到9这10个数字用点阵来存储，所以我们可以在shuzu.js文件里面定义一个三维数组，其中存放0到9数字的点阵

由于显示有限我就截屏显示到这里，3到10的点阵定义方法与此相同（有小球的地方数字为1，没有小球的地方数字为0），当然其中我们还需要有小时与分钟，分钟与秒钟之间间隔用的冒号，所以在这个digit数组的最后还需要定义一个冒号点阵。

估计大家对怎么在网页上画小球还不是很了解，我给大家先说一下，canvas操作上有一个画圆的函数：ctx.arc(centerX,centerY,radius,beginA,endAI)，centerX、centerY分别是圆心横纵坐标，radius是圆的半径，beginA、endA分别是画圆时的起始角度和终止角度。

现在大家已经知道怎么用小球来刻画数字以及怎么画一个小球，之后我们就可以编写代码了。

 

Fourth

在编写代码时，我们应该考虑到调试代码以及编写代码时的方便，所以最好先考虑一下我们需要用到哪些变量，这些变量中哪些是不会改变的，把这些不会改变的变量设置为全局变量对之后代码的调整很方便，在这个代码中小球的半径是不会变的，在这里就先把小球半径设置为全局变量，后面还会产生很多全局变量。

为了让时间不团改变，可以用到setInterval这个函数，在将其他代码放到setInterval里面就可以实现时间的改变，具体代码：

将一个大问题分为几个小问题是代码编写中比较好的是方法，所以我们只在主函数里面写函数调用语句，其中的time（context）函数是用来将时间的小时分钟秒钟获取到并在canvas画布上画出来的函数，其中具体的绘制功能，我也用了一个画图的函数drawnum（），第二个updateballs（）使用来对彩色小球进行跟新的函数。

time（）函数中需要用到一些具体的画图功能，所以需要将第一步中获取到的context传给time函数，time函数代码如下：

drawnum（）代码如下：

观察demo知道，每个改变的数字都会产生彩色小球，所以为了获取到每次时间改变时是哪些数字在改变，可以定义一个time0变量来存放上一次的时间，对比就可以知道时间改变时具体是哪些数字在改变，所以这里可以先给time0定义一个初始值，过后再将上一个time的值赋给time0，这样一次循环就可以判断出那些数字在改变。

addballs（）函数的功能是根据在改变的数字产生小球并添加到balls数组中，这个balls数组为了方便（避免反复在函数之间传递）直接定义为全局变量，为了实现彩色效果，也需要定义一个全局变量colors数组用来存放颜色值。

 

其中的一些js函数（比如随机函数Math.random）是为了让彩色小球的运动更美观，更多样。通过vx，vy，g来改变彩色小球的纵横左边来实现小球的运动。

所以以上这些步骤完了之后就需要实现彩色小球的运动效果了，这个效果的实现就用到了updateballs函数，这个函数对彩色小球的纵横坐标进行刷新，具体代码：

 

102-106行代码地步边界检测，如果到达底部边界彩色小球就以vy*0.75的速度反向运动，但这样不断的向balls数组里面添加彩色小球并且不断地遍历画图会非常吃内存，导致程序运行一段时间后，balls的长度无敌的大，程序崩溃，随意在updateballs函数里面还需要对balls数组进行判断删除，既还在画布范围内的彩色小球保留，超出画布范围内的小球删除（pop），这样程序就可以一直运行，108-114行代码就是实现这一功能的。

到此所有的代码已经完成了，实现了一个比较炫酷的canvas粒子时间，希望可以帮到大家哦，以后还会继续为大家推出canvas的其他炫酷的粒子效果哦！如果大家想获得更多更多关于网页设计的内容，请扫描屏幕下方二维码获取最新消息。

PS：未经允许严禁转载，部分图片来自网上

再不扫描屏幕下方二维码，机会就飞走了哦

重庆大学网络信息协会

5月16日