前言

在我们日常开发中贝塞尔曲线无处不在：

1. svg 中的曲线（支持 2阶、 3阶）
2. canvas 中绘制贝塞尔曲线
3. 几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线

所以掌握贝塞尔曲线势在必得。 这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG

绘制贝塞尔曲线

第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。

const canvas = document.getElementById( \'canvas\' );
const ctx = canvas.getContext( \'2d\' );
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = \'#000\';
ctx.moveTo(100,100)
ctx.quadraticCurveTo(180,50, 200,200)
ctx.stroke();

这样我们就画好了一个贝塞尔曲线了。

绘制贝塞尔曲线动画

画一条线谁不会哇？接下来文章的主体内容。 首先试想一下动画我们肯定一步步画出曲线？ 但是这个ctx给我们全部画出来了是不是有点问题。我们重新看下二阶贝塞尔曲线的实现过程动画，看看是否有思路。

从图中可以分析得出贝塞尔上的曲线是和t有关系的， t的区间是在0-1之间，我们是不是可以通过二阶贝塞尔的曲线方程去算出每一个点呢，这个专业术语叫离散化，但是这样的得出来的点的信息是不太准的，我们先这样实现。

先看下方程：

我们模拟写出代码如如下：

//这个就是二阶贝塞尔曲线方程
function twoBezizer(p0, p1, p2, t) {
  const k = 1 - t
  return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2
}

//离散
function drawWithDiscrete(ctx, start, control, end,percent) {
    for ( let t = 0; t <= percent / 100; t += 0.01 ) {
        const x = twoBezizer(start[0], control[0], end[0], t)
        const y = twoBezizer(start[1], control[1], end[1], t)
        ctx.lineTo(x, y)
    }
}

我们看下效果：

和我们画的几乎是一模一样，接下啦就用requestAnimationFrame 开始我们的动画给出以下代码：

let percent = 0
function animate() {
    ctx.clearRect( 0, 0, 800, 800 );
    ctx.beginPath();
    ctx.moveTo(100,100)
    drawWithDiscrete(ctx,[100,100],[180,50],[200,200],percent)
    ctx.stroke();
    percent = ( percent + 1 ) % 100;
    id =  requestAnimationFrame(animate)
}
animate()

这里有两个要注意的是， 我是是percent 不断加1 和100 求余，所以呢 percent 会不断地从1-100 这样往复，OK所以我们必须要动画之前做一次区域清理， ctx.clearRect( 0, 0, 800, 800 ); 这样就可以不断的从开始到结束循环往复，我们看下效果：

看着样子是不是还不错哈哈哈

标签：动画,面试官,贝塞尔,曲线,ctx,canvas,percent,100
来源： https://www.cnblogs.com/ipython258/p/14939420.html