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

【问题标题】：Run a circle through the points of a quadric curve with JavaScript and Canvas使用 JavaScript 和 Canvas 在二次曲线的点上运行一个圆
【发布时间】：2015-09-19 09:18:49
【问题描述】：

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

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;
}

   &lt;canvas id="canvas"&gt;&lt;/canvas&gt; Run that circle through the curve

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

【问题讨论】：

嗨，我发现这个教程看起来和你想要的很相似：html5code.nl/canvas-tutorial/…
这不是二次贝塞尔曲线，但是谢谢。
我说的差不多，不准确:)

标签： javascript html canvas quadratic-curve

【解决方案1】：

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

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

第一个点是调用quadraticCurveTo之前路径开始的地方，另外两个点是传递给quadraticCurveTo的点。

你改变t的值来得到曲线的不同点，当t是0你得到第一个点，当t是1你得到最后一个点，@之间的值987654330@ 和 1 将在曲线中间为您提供点。

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

【讨论】：