上图：
001.gif
前面有用Java写过一个粒子爆炸烟花效果，和这个思路是一样的，不过是Android程序，有兴趣的可以看看：
Android 粒子爆炸 烟花效果。
现在这个是用Html Canvas + Js写的。
先看看气球的组成：
002.png
可以看到，单个气球由三部分构成：
1.气球头。
2.气球中间扭动线。
3.气球尾部摆动线。
这三个部分都有独立的属性， 比如颜色、位置、摆动速度等等....
所以把这三个部分分别作为一个类， 并且记录他们各自的属性：
1.气球头：
/**
* 圆实体
*/
export class Cirecle{
constructor(centerX, centerY, radius, color, speed) {
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
this.color = color;
this.speed = speed;
}
}
2.气球中间扭动线
/**
* 贝塞尔曲线实体
*/
export class BezierCurve{
constructor(lineOnePointX, lineOnePointY, lineTwoPointX, lineTwoPointY, lineEndPointX, lineEndPointY, onePointLeftMove, twoPointLeftMove, onePointSpeed, twoPointSpeed) {
this.lineOnePointX = lineOnePointX;
this.lineOnePointY = lineOnePointY;
this.lineTwoPointX = lineTwoPointX;
this.lineTwoPointY = lineTwoPointY;
this.lineEndPointX = lineEndPointX;
this.lineEndPointY = lineEndPointY;
this.onePointLeftMove = onePointLeftMove;
this.twoPointLeftMove = twoPointLeftMove;
this.onePointSpeed = onePointSpeed;
this.twoPointSpeed = twoPointSpeed;
}
}
3.气球尾部摆动线。
/**
* 尾线实体
*/
export class TailLine{
constructor(startX, startY, endX, endY) {
this.startX = startX;
this.startY = startY;
this.endX = endX;
this.endY = endY;
}
}
最后再把这三个部位整合成一个完整的气球：
/**
* 气球
*/
export class Balloon{
constructor(circle, bezierCurve, tailLine) {
this.circle = circle
this.bezierCurve = bezierCurve
this.tailLine = tailLine
}
}
分析完静态气球后， 就可以分析气球的运动了
- 在鼠标点击时在鼠标位置生成气球、颜色随机。
2.气球自动上升、线自动摆动。
3.气球超出显示区域后消失。
先看第一个：
1.在界面mounted时为canvas设置点击监听：
图片.png
图片.png
当鼠标在canvas上点击时， 会根据点击的位置， 生成三个部位的实体，最终组成一个气球，再将气球存入数组中， 当然这一步还没有开始绘制， 是看不到效果的。
第二个：
要想气球动起来，当然少不了Canvas动画了， Canvas动画主要用到这个方法：requestAnimationFrame() 不断刷新canvas， 当我们改变气球位置数据的时候， 界面刷新就可以看到气球动起来了：
图片.png
当然再不断刷新Canvas的过程中， 记得clearRect清除画布上一次的数据， 不然上一次绘制的还会显示在canvas上。
再看看实际绘制部分代码：
图片.png
/**
* 绘制气球
*/
drawBalloon(){
this.balloons.forEach((item, index) => {
let circle = item.circle;
let bezierCurve = item.bezierCurve;
let tailLine = item.tailLine;
//画一个实心圆
this.currentContext.beginPath();
this.currentContext.fillStyle = circle.color;//填充颜色,默认是黑色
this.currentContext.arc(circle.centerX, circle.centerY, circle.radius, 0, Math.PI * 2, false);
this.currentContext.fill();//画实心圆
this.currentContext.closePath()
//中间贝塞尔曲线
this.currentContext.beginPath();
this.currentContext.strokeStyle = circle.color;//填充颜色,默认是黑色
this.currentContext.moveTo(circle.centerX, circle.centerY + circle.radius);
this.currentContext.bezierCurveTo(bezierCurve.lineOnePointX, bezierCurve.lineOnePointY, bezierCurve.lineTwoPointX, bezierCurve.lineTwoPointY, bezierCurve.lineEndPointX, bezierCurve.lineEndPointY)
this.currentContext.stroke();
this.currentContext.closePath()
//尾线
this.currentContext.beginPath();
this.currentContext.moveTo(tailLine.startX, tailLine.startY);
this.currentContext.lineTo(tailLine.endX, tailLine.endY);
this.currentContext.stroke();
this.currentContext.closePath()
circle.centerY -= circle.speed;
//贝塞尔位置
bezierCurve.lineOnePointY = circle.centerY + this.radius * 2;
bezierCurve.lineTwoPointY = circle.centerY + this.radius * 3;
bezierCurve.lineEndPointY = circle.centerY + this.radius * 4;
//尾线位置
tailLine.startX = bezierCurve.lineEndPointX;
tailLine.startY = bezierCurve.lineEndPointY;
tailLine.endX = bezierCurve.lineOnePointX;
tailLine.endY = circle.centerY + this.radius * 4.5;
if (!bezierCurve.onePointLeftMove) {
bezierCurve.lineOnePointX += bezierCurve.onePointSpeed;
if (bezierCurve.lineOnePointX >= circle.centerX + this.radius) {
bezierCurve.onePointLeftMove = true;
}
} else {
bezierCurve.lineOnePointX -= bezierCurve.onePointSpeed;
if (bezierCurve.lineOnePointX <= circle.centerX - this.radius) {
bezierCurve.onePointLeftMove = false;
}
}
if (!bezierCurve.twoPointLeftMove) {
bezierCurve.lineTwoPointX += bezierCurve.twoPointSpeed;
if (bezierCurve.lineTwoPointX >= circle.centerX + this.radius) {
bezierCurve.twoPointLeftMove = true;
}
} else {
bezierCurve.lineTwoPointX -= bezierCurve.twoPointSpeed;
if (bezierCurve.lineTwoPointX <= circle.centerX - this.radius) {
bezierCurve.twoPointLeftMove = false;
}
}
//超出屏幕 清除
if (tailLine.endY <= 0) {
this.balloons.splice(index, 1);
}
})
}
既然分三部分设计， 绘制也肯定是分三部分绘制了， 先绘制圆， 表示气球头， 再绘制贝塞尔曲线， 表示气球中间摆动的线， 最后是绘制线， 也就是气球的尾线。
每次绘制， 我们都改变气球头Y轴的位置， 使它越来越小， 看上去就像在不断上升一样， 线的位置也会相对头的位置重新计算。
第三个：
点击生成气球是没有限制的， 如果超出显示区域的气球不销毁， 则会浪费内存， 并且会增加绘制时间， 所以判断在气球超出canvas区域时销毁气球：
//超出屏幕 清除
if (tailLine.endY <= 0) {
this.balloons.splice(index, 1);
}
结束结束
下面是源码，see see：
https://gitee.com/amgg/ascendingballoondemo
