canvas德卡斯特里奥算法构造贝塞尔曲线可视化实现

前言

在现代js教程中看到通过德卡斯特里奥算法构造贝塞尔曲线的demo，觉得很有意思，尝试自己写一下
目标效果如下

吐槽一下，我看到文章底部才发现原来这里的demo是svg做的

开始制作

多层画布

因为这个动画效果有变化的部分和不变的部分，所以将它们区分开，减少重复绘制。方格坐标是固定不变的，作为最底层；控制点线段也只需绘制一次，作为第二层；绘制过程的多个变化线段，作为第三层。

<div id="bezierCurve">
  <canvas id="coordinateSystem" width="420" height="420"
    >此环境不支持canvas</canvas
  >
  <canvas id="controlLine" width="420" height="420"
    >此环境不支持canvas</canvas
  >
  <canvas id="animation" width="420" height="420"
    >此环境不支持canvas</canvas
  >
  <button id="opAnimation" onclick="opAnim()">开始</button>
  <span id="showTime">t:0</span>
</div>

定义全局常量变量

// 定义常量
const whMultiple = 20; //格子所占大小
const translation = 10; //坐标系离canvas原点的偏移量，因为紧挨着线段宽度会减少一半
const self = this; //获取全局对象，方面后面调用
const pointsControl = [
  { x: 0, y: 20 },
  { x: 10, y: 20 },
  { x: 10, y: 0 },
  { x: 20, y: 0 },
  { x: 20, y: 10 },
  { x: 15, y: 10 },
  { x: 15, y: 15 },
];
// 定义全局变量
var timer; //定时器
var distance = 0; // 在A->B上按比例取点，0为A点，1为B点
var pointsBezier = []; //存储贝塞尔曲线上的点
var coordinateSystem = document
  .getElementById('coordinateSystem')
  .getContext('2d');
var controlLine = document.getElementById('controlLine').getContext('2d');
var animation = document.getElementById('animation').getContext('2d');
const opAnimation = document.getElementById('opAnimation');
const showTime = document.getElementById('showTime');

方格画板

首先需要一个方格画板，写个方法，以左上角为原点做一个坐标系

// 定义常量
const whMultiple = 10; //格子所占大小
// 绘制坐标系
function drawCoordinateSystem(ctx, x, y) {
  if (x < 1 || y < 1) return;
  ctx.strokeStyle = '#e2e2e2';
  ctx.lineWidth = 0.5;
  ctx.beginPath();
  for (let i = 0; i <= x; i++) {
    ctx.moveTo(i * whMultiple, 0);
    ctx.lineTo(i * whMultiple, y * whMultiple);
  }
  for (let i = 0; i <= y; i++) {
    ctx.moveTo(0, i * whMultiple);
    ctx.lineTo(y * whMultiple, i * whMultiple);
  }
  ctx.stroke();
}

控制点连线

德卡斯特里奥算法是通过递归不断降阶，最终得到一阶曲线的算法。除了最开始所给定的控制点，每次降阶产生的点也可以看作控制点

// 绘制控制点连线线段，参数形如[{x,y}]
function drawControlLine(ctx, coordinates, color) {
  if (coordinates.length <= 1) return;
  ctx.strokeStyle = color;
  ctx.lineWidth = 0.5;
  ctx.beginPath();
  ctx.moveTo(coordinates[0].x * whMultiple, coordinates[0].y * whMultiple);
  for (let i = 1; i < coordinates.length; i++) {
    ctx.lineTo(
      coordinates[i].x * whMultiple,
      coordinates[i].y * whMultiple
    );
  }
  ctx.stroke();
}

重头戏之德卡斯特里奥算法

给不同阶数的控制线不同的颜色，目前颜色是写死了七种，最高就支持七阶，更高也能画线，但是颜色就不对了，这个有需要的可以自己写个阶梯颜色生成函数，就能支持任意阶数了。
draw函数是通过递归，不断降阶，最终得出贝塞尔曲线上的一个点，也绘画出这一帧的变化。然后是setInterval执行动画，原本想window.requestAnimationFrame()的，不过这样动画太快了，不好清晰的看到曲线生成的过程，如读者有更好的写法，欢迎指正。

// 德卡斯特里奥算法
function deCasteljau(ctx, pointsControl) {
  if (pointsControl.length <= 1) return;
  const colors = [
    '#15209b',
    '#15719b',
    '#157e9b',
    '#159b9b',
    '#159b89',
    '#159b4b',
    '#759b15',
  ];
  // 这里做绘制一帧的操作
  function draw(pointsControl, distance) {
    if (pointsControl.length <= 2) {
      pointsBezier.push(
        getMidPoint(distance, pointsControl[0], pointsControl[1])
      );
      drawControlLine(ctx, pointsBezier, 'red');
      return;
    }
    const newPointsControl = [];
    for (let i = 1; i < pointsControl.length; i++) {
      newPointsControl.push(
        getMidPoint(distance, pointsControl[i - 1], pointsControl[i])
      );
    }
    drawControlLine(ctx, newPointsControl, colors[newPointsControl.length]);
    draw(newPointsControl, distance);
  }
  timer = setInterval(() => {
    if (self.distance >= 1.01) {
      clearInterval(timer);
      self.distance = 0;
      self.pointsBezier = [];
      self.opAnimation.innerText = '开始';
      self.showTime.innerText = 't:0';
      return;
    }
    self.showTime.innerText = 't:' + self.distance;
    ctx.clearRect(0, 0, 800, 800);
    draw(pointsControl, self.distance);
    self.distance = parseFloat((self.distance + 0.01).toFixed(2));
  }, 100);
}

这里是获取有向线段A->B上按比例取的点坐标

function getMidPoint(distance, pointStart, pointEnd) {
  const x = pointStart.x + distance * (pointEnd.x - pointStart.x);
  const y = pointStart.y + distance * (pointEnd.y - pointStart.y);
  return { x, y };
}

控制按钮

function opAnim() {
  switch (opAnimation.innerText) {
    case '开始':
      console.log('开始', this.distance);
      opAnimation.innerText = '暂停';
      deCasteljau(animation, pointsControl, distance);
      break;
    case '继续':
      console.log('继续', distance);
      opAnimation.innerText = '暂停';
      deCasteljau(animation, pointsControl, distance);
      break;
    case '暂停':
      opAnimation.innerText = '继续';
      clearInterval(timer);
      break;
    default:
      break;
  }
}

完成效果

不算高度还原，只能说实现了可视化吧，现代JS教程的那个demo还可以拖拽控制点，这个后面我有时间再开一个贴。

参考

现代JavaScript教程
德卡斯特里奥算法——找到Bezier曲线上的一个点
canvas中的拖拽、缩放、旋转