Canvas从入门到动态粒子效果-我用了两小时

程序员文章站 2022-05-28 14:44:08

...

canvas实现动态粒子效果

前言

最近期末考试，很长时间没有写程序，于是想找个东西练练手。之前在写程序的时候就使用了这种动态粒子效果，但是那时是直接拷贝的别人的代码，于是就动手尝试写出这种效果。

Canvas从入门到动态粒子效果-我用了两小时

引入

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）将每个点的信息存储起来，以便于后面点的移动，主要包括点的横纵坐标、点的颜色。

Canvas从入门到动态粒子效果-我用了两小时

二、让随机出的粒子动起来

（1）可以通过setInterval让程序重复执行代码段，所以我们需要设计一段代码来进行粒子的位置移动。
（2）我们可以随机出粒子的坐标点，为什么不可以随机出一个目标点，让粒子移动过去呢？所以我为每一个粒子随机出了一个目标位置，让粒子向目标移动。每次执行代码段时便判断是否移动到目标位置，如果没有就继续移动，如果到了就新随机出一个目标点。
（3）粒子应该怎么想目标移动呢？这里我使用了小学就会的一元一次线性函数，让粒子线性的向目标移动。通过粒子的当前点与目标点，我们不难得出两点之间的直线方程。我们每次让x以自增1的步长，来计算y值。此时的xy便对应粒子移动到下一步的坐标，这样便实现了移动。

（4）其实可以使用非线性函数，可以采用一些缓动函数，这样可以让动画变得自然一些。