Math B&xE9；zier曲线计算

我正试图画一条简单的贝塞尔曲线，但我就是不明白它背后的数学原理，如果有人能给我解释一下这条简单的贝塞尔曲线，那就太棒了：）

我们有

point1
X: 0
Y: 0

point2
X: 100
Y: 100

control point1
X: 0
Y: 100

基本上我们有一条从左上角开始的线，从100×100像素正方形的左上角到右下角有一条对角线，但现在我想把这条线拉到X位置0和Y位置100的控制点，有人能给我解释一下这里发生的简单数学吗，如果可能，可以使用我的值显示计算：）

多谢各位

附言：基本情况

更新

下面是我的简单javascript代码，它使用以下等式

canvasHolder = document.getElementById( 'canvas' );
canvas = canvasHolder.getContext('2d');

var deltaT = 0.10;
var point1 = new Point(300,300);
var point2 = new Point(400,400);
var controlPoint1 = new Point(100,200);
//Bezier cruve
for( var i = 0; i < 10; i++ )
{
    var t = (i/10) * 0.1;
    var xPos = ( 1.0 * - t*t ) * point1.x + 2.0 * ( 1 - t ) * t * controlPoint1.x + t * t * point2.x;
    var yPos = ( 1.0 * - t*t ) * point1.y + 2.0 * ( 1 - t ) * t * controlPoint1.y + t * t * point2.y;
    console.log( "xPos = " + xPos + ", yPos = " + yPos );
    var particle = new Particle( "circle", xPos, yPos, 5, "#FF0000", "#333333");
    particles[i] = particle;
}

我为什么会得到这个结果有什么原因吗

编辑

没关系，我是这么做的

var xPos = ( 1.0 * - t*t ) * point1.x + 2.0 * ( 1 - t ) * t * controlPoint1.x + t * t * point2.x;

这是什么时候

var xPos = ( 1.0 - t*t ) * point1.x + 2.0 * ( 1 - t ) * t * controlPoint1.x + t * t * point2.x;

---

贝塞尔曲线是参数曲线。这意味着您将有两个方程：一个用于曲线上的x坐标，另一个用于曲线上的y坐标

在本例中，您使用的是二次贝塞尔。计算公式为：

x（t）=（1.0-t^2）*p0.x+2.0*（1-t）*t*p1.x+t^2*p2.x
y（t）=（1.0-t^2）*p0.y+2.0*（1-t）*t*p1.y+t^2*p2.y

在这种情况下，p0是起点，p1是控制点，p2是终点

t在曲线上从0到1变化。因此，要使用标准的线条绘制功能绘制它，您需要执行以下操作：

float numDivisions = 100.0; // <- You need to decide what this value should be. See below
float t;
float deltaT = t / numDivisions;
MoveTo (p0.x, p0.y);
for (t = 0; t <= 1.0; t += deltaT)
{
    x = (1.0 - t*t) * p0.x + 2.0 * (1 - t) * t * p1.x + t * t * p2.x;
    y = (1.0 - t*t) * p0.y + 2.0 * (1 - t) * t * p1.y + t * t * p2.y;
    LineTo (x, y);
}

---

float numDivisions=100.0；// 可以从几何表示中导出bezier曲线的参数方程：

  (a)--A-----(c)
          x    \
                C
                 \
                  \
                  (b)

从a->c->b画一条线

将
a->c
的直线细分为a点，其中a=t*（c-a）+a，即从a到c的t个单位（0你希望绘制曲线或沿着曲线移动物体吗？将物体移动很长一段时间，我很抱歉没有反应，一直很忙，正在工作，因此：（但是为所有的答案欢呼，我今晚将深入研究一下，如果我们有p0x:0，y:0，p1x:0y:100和p2x:100y:100，如果我们有numVidivisions=10，我们将循环10次，所以对于第二次迭代T=0.1，这是方程中的正确值吗？x=（1.0-0.1*0.1）*0+2.0*（1-0.1）*0.1*0+0.1*0.1*0.1*100）这对X正确吗？刚刚做了一些简单的测试，结果对我来说是正确的：）我只是把t设为0.5，想看看X是25，y是75，事实上是：）为帮助干杯，但是如果我想添加5个控制点呢？对于二次贝塞尔，在两个端点之间只有一个控制点。但是，可以在当前贝塞尔线段之前或之后添加更多的二次贝塞尔线段。所以你会有起点，控制点，终点（也是下一个起点），控制点，终点（也是下一个起点），等等。你能看看我在问题中发布的javascript代码吗？
  (a)--A-----(c)
          x    \
                C
                 \
                  \
                  (b)

  A = (c-a)*t + a = { cx-ax * t + ax, cy-ay * t + ay }
  B = (b-c)*t + c = { bx-cx * t + cx, by-cy * t + cy }       
  x = (C-A)*t + A = { Cx-Ax * t + Ax, Cy-Ay * y + Ay }