Js Canvas实现 上升气球效果

上图：

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
    }
}

分析完静态气球后， 就可以分析气球的运动了

1. 在鼠标点击时在鼠标位置生成气球、颜色随机。
   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