最近期末考试,很长时间没有写程序,于是想找个东西练练手。之前在写程序的时候就使用了这种动态粒子效果,但是那时是直接拷贝的别人的代码,于是就动手尝试写出这种效果。
Canvas是一个可以使用脚本来绘制图形的 HTML 元素...(略过N字)。canvas就是一个画板,可以调用它的一些方法让我们"作画"。可是我对这个一无所知,于是就百度了一下教程,了解到了如下函数:
strokeStyle
描边颜色fillStyle
填充颜色fillRect
填充了的矩形moveTo
移动画笔lineTo
从当前画笔位置画线到指定位置
(1)将canvas标签加入到body
并设置id属性,在js中获取并取得画笔。
var ctx=document.getElementById("can").getContext("2d");
(2)循环画出20个随机点。我们使用画笔的fillRect
函数画一个个矩形充当粒子。fillRect
需要横纵坐标与矩形宽高,我们需要随机出横纵坐标。这点通过Math.random()
可以轻松实现。
(3)将每个点的信息存储起来,以便于后面点的移动,主要包括点的横纵坐标、点的颜色。
(1)可以通过setInterval
让程序重复执行代码段,所以我们需要设计一段代码来进行粒子的位置移动。
(2)我们可以随机出粒子的坐标点,为什么不可以随机出一个目标点,让粒子移动过去呢?所以我为每一个粒子随机出了一个目标位置,让粒子向目标移动。每次执行代码段时便判断是否移动到目标位置,如果没有就继续移动,如果到了就新随机出一个目标点。
(3)粒子应该怎么想目标移动呢?这里我使用了小学就会的一元一次线性函数,让粒子线性的向目标移动。通过粒子的当前点与目标点,我们不难得出两点之间的直线方程。我们每次让x以自增1的步长,来计算y值。此时的xy便对应粒子移动到下一步的坐标,这样便实现了移动。
(4)其实可以使用非线性函数,可以采用一些缓动函数,这样可以让动画变得自然一些。
让距离较近的粒子相互连接起来,实现相应效果。可以通过双重循环进行连接判断,只要两者距离达到阀值就连接起来。
调整图中粒子大小颜色,调整连接阀值,去除线性函数轨迹,得出结果图。
(1)粒子移动采用非线性缓动函数。
(2)粒子移动每次步进应该由需要移动路径的长度决定,而不只是1。
(3)加入鼠标事件,做到与用户交互。