canvas实现烟花的示例代码

前言:马上过年了,我打算在后台里面偷偷地埋个新春祝福+放烟花的彩蛋。项目是基于react+typescript的,因此最后封装成了一个组件,设置好开启时间就可以显示了。 目录结构 目录结构大致如下 我们将烟花分为两个阶段,一个是未炸开持续上升时期,另一个是炸开后分散的时期。 其中Vector表示一个坐标,Particle表示一个烟花的亮点,Firewor表示烟花未炸开时持续上升的亮点。index.tsx就是组件了,绘制了canvas,并执行了动画。 Vector 这个坐标就很简单,后面涉及到位置的变更都可以使用它的add方法进行偏移操作 export default class Vecto