Method createDots

src/particle.ts:195–231

* 根据配置参数创建许多粒子（纯数据） * 最后通过 draw 函数绘制真实可见的图形

()

   * 最后通过 draw 函数绘制真实可见的图形
   */
  private createDots(): void {
    const { canvasWidth, canvasHeight, getColor } = this
    const {
      maxR,
      minR,
      maxSpeed,
      minSpeed,
      parallaxLayer,
      spin,
      spinMaxSpeed,
      spinMinSpeed,
    } = this.options
    const layerLength = parallaxLayer.length
    let { num } = this.options

    while (num--) {
      const r = randomInRange(maxR, minR)
      this.elements.push({
        r,
        x: randomInRange(canvasWidth - r, r),
        y: randomInRange(canvasHeight - r, r),
        vx: randomSpeed(maxSpeed, minSpeed),
        vy: randomSpeed(maxSpeed, minSpeed),
        color: getColor(),
        shape: this.getShapeData(),
        // 定义粒子在视差图层里的层数及每层的层级大小
        parallaxLayer: parallaxLayer[Math.floor(Math.random() * layerLength)],
        // 定义粒子视差的偏移值
        parallaxOffsetX: 0,
        parallaxOffsetY: 0,
        // 定义粒子的旋转角度
        rotate: spin ? randomInRange(0, 360) : 0,
        // 粒子的旋转速度
        rotateSpeed: randomSpeed(spinMaxSpeed, spinMinSpeed),
      })
    }
  }

  /**
   * 绘制粒子