这篇博客是模仿nest.js实现一个demo
,由简单到复杂,来一步步的实现它。这里是效果预览。这是我的github,里边还有很多别的前端的demo
。
从一道面试题开始
实现一个半径
10px
的小球在500px*500px
的方块中做直线运动,初始方向随机,速度保持不变,碰撞到墙壁后反弹。
看下效果,思路很简单,将小球定位在方块中,设置xy
方向上的速度,每帧动画给小球定位的值加上对应方向的速度值,在检测到小球碰撞墙壁的时候,将对应方向的速度置为反方向就可以了。这里是实现的代码,没有用到canvas
,但是思路一致。
尝试实现
画出一个弹射的小球很简单,那怎么用多个小球实现nest.js这样的效果呢。这样的特效肯定不能用Dom
直接做,太耗费性能,也做不出来,这时就显露出canvas
的强大之处了。
同样的,用canvas
生成多个弹来弹去的小球。首先不要管鼠标如何吸附这些小圆点,只做小球之间的连线。在每次绘制小球之前,判断一下它和之前的小球的距离是不是小于极限距离,小于就以它俩为端点绘制一条线。代码如下,思路都写在注释里:
看下效果,丑陋,和人家的不一样,很生硬。因为连线不是突然出现突然消失的,点和点之间的连线是渐渐的出现,然后渐渐消失的。给连线添加动态的属性,用点和点的之间的距离来计算连线的粗细、透明度,在两点距离比较远的时候线会变淡,这样看起来就舒服多了。
添加鼠标事件
先是加入对鼠标的响应。在鼠标进入浏览器时添加鼠标这个点,否则移除。
要实现一个鼠标吸附粒子的效果,思路就是粒子和鼠标的距离在一定范围内时,给粒子添加一个向着鼠标的速度,结果就好像是粒子受到鼠标的吸附一样。这是一段鼠标吸附效果的核心代码:
加入鼠标的点之后再做一些调整,得到最终的代码。
其他的粒子特效
还可以利用canvas
的getImageData
属性,将图片粒子化,做成轮播图,点击这里预览,主要思路是用getImageData
取到图片像素点的信息,每隔一段取一个样本,以这个样本绘制粒子,绘制出类似于马赛克一样的图片,然后给粒子加上运动的效果就可以了,这里是具体的代码实现。
这篇博客到这就结束了,这是我的github,欢迎来访,欢迎star。