javascript - 使用 JavaScript 和 Canvas 在二次曲线的点上运行一个圆

Question

我想在二次曲线的每个点上运行一个圆圈，因为我正在制作一个掷圈游戏。这是我的问题的示例代码：

canvas.width = 200;
canvas.height = 200;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,200,200,200);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(20,20,20,Math.PI*2,0);
ctx.fill();
function loop(){
  //Code to move circle through the quadric curve
  //???
  //???
  ctx.beginPath();
  ctx.fillStyle = "orange";
  ctx.arc(20,20,20,Math.PI*2,0);
  ctx.fill();
  requestAnimationFrame(loop);
}

*{
  margin: 0;
  padding: 0;
}

   <canvas id="canvas"></canvas> Run that circle through the curve

我该如何解决这个问题？
对不起我的英语，谢谢你的回答！

Answer 1

您需要编写下面给出的二次曲线的参数公式以获得曲线的点。

此公式根据其他三个点 和 给出曲线的点t。

第一个点是在调用 to 之前路径开始的位置quadraticCurveTo，另外两个点是传递给的点quadraticCurveTo。

您更改 的值t以获得曲线的不同点，何时t获得0第一个点，何时t获得1最后一个点，介于0和之间的值1将为您提供曲线中间的点。

您还可以通过使用 绘制曲线quadraticCurveTo并检查像素的颜色来获取曲线的点getImageData。