首页 > 其他分享> > 【canvas】三阶贝塞尔曲线拟合圆

【canvas】三阶贝塞尔曲线拟合圆

2020-01-20 22:03:09 作者：互联网

回顾

在做这个之前，我还做了
【canvas】网易云音乐鲸云特效『水晶音波』的简单实现
 【canvas】网易云音乐鲸云动效『孤独星球』的简单实现
 【canvas】实现多种形状的烟花

canvas

理解了公式，就可以动手写代码了。

class Cricle {
  /**
   * 三阶贝塞尔曲线模拟圆
   * @param {Object} context canvas.getContext("2d")
   * @param {Array} pole 圆心位置
   * @param {Number} petal 用 petal 段三阶贝塞尔曲线模拟圆
   * @param {Number} radius 半径
   * @param {String} color 圆内填充颜色
   * @param {Number} α 将圆旋转一个α°
   */
  constructor(context, pole, petal, radius, color, α = 0) {
    this.ctx = context;
    this.pole = pole;
    this.petal = petal;
    this.radius = radius;
    this.color = color;
    this.α = α;
    this.length = petal * 3;
    this.buffer = [];
    this.data = [];
    this.__init();
    this.render();
  }

  __init() {
    const θ = 2 * Math.PI / this.petal;
    const cosθ = Math.cos(θ);
    const sinθ = Math.sin(θ);
    const h = this.radius * (4 * (1 - Math.cos(θ / 2))) / (3 * Math.sin(θ / 2));
    const p1 = [this.radius, 0];
    const p2 = [this.radius, h];
    const p3 = [this.radius * cosθ + h * sinθ, this.radius * sinθ - h * cosθ];
    for (let i = 0, idx = 0; i < this.petal; ++i, idx += 3) {
      const cosNθ = Math.cos(i * θ + this.α);
      const sinNθ = Math.sin(i * θ + this.α);
      this.data[idx] = this.__rotate(p1, cosNθ, sinNθ);
      this.data[idx + 1] = this.__rotate(p2, cosNθ, sinNθ);
      this.data[idx + 2] = this.__rotate(p3, cosNθ, sinNθ);
    }
    this.data.forEach((v, i) => { this.buffer[i] = [v[0] + this.pole[0], v[1] + this.pole[1]]; });
    this.buffer[this.buffer.length] = this.buffer[0];
  }

  __rotate(p, cosα, sinα) {
    return [p[0] * cosα - p[1] * sinα, p[1] * cosα + p[0] * sinα];
  }

  render() {
    this.ctx.moveTo(this.buffer[0][0] + this.pole[0], this.buffer[0][1] + this.pole[1]);
    this.ctx.beginPath();
    this.ctx.strokeStyle = 'blue';
    for (let i = 0, idx = 0; i < this.petal; ++i, idx += 3) {
      const A = this.buffer[idx];
      const B = this.buffer[idx + 1];
      const C = this.buffer[idx + 2];
      const D = this.buffer[idx + 3];
      this.ctx.lineTo(...A);
      this.ctx.bezierCurveTo(...B, ...C, ...D);
      // 标出所有点
      // this.ctx.fillStyle = `hsl(${Math.floor(Math.random() * 360)}, 60%, 60%)`;
      // this.ctx.fillRect(A[0] - 2, A[1] - 2, 4, 4);
      // this.ctx.fillRect(B[0] - 2, B[1] - 2, 4, 4);
      // this.ctx.fillRect(C[0] - 2, C[1] - 2, 4, 4);
    }
    this.ctx.closePath();
    this.ctx.fillStyle = this.color;
    this.ctx.fill();
  }
}

const canvas = document.getElementById('background');
const pole = [canvas.width / 2, canvas.height / 2];
const petal = 4;
const radius = canvas.width / 2 * .5625;
const cricle = new Cricle(canvas.getContext("2d"), pole, petal, radius, 'rgba(241, 240, 237, .1)', 0);