Html 在CSS或画布中绘制一条曲线，并沿其移动圆

今天有人给我设计了一个沿曲线运动的圆。我用纯css创建了一个JSBin，迄今为止我已经取得了进步，但我觉得我走错了方向。我想也许用帆布做会更好，但我不确定从哪里开始。这不仅仅是沿着一条线画，它还填充了条线

设计如下：

以下是到目前为止我与CSS的关系：

---

以下是如何沿曲线（即三次贝塞尔曲线）设置圆的动画。

• 使用canvas的

  context.bezierCurveTo

  方法绘制曲线

• 使用一系列canvas的

  context.lineTo

  方法关闭彩虹路径

• 要仅用彩虹颜色填充曲线路径，可以使用

  context.clip

  将图形限制为仅显示在路径内部。然后，您可以使用

  context.fillRect

  填充您的多色条带

• 使用

  requestAnimationFrame

  创建一个动画循环，在沿曲线增加的航路点处绘制球

• 使用

  De Casteljau算法沿曲线计算航路点

下面是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var colors=[[229133,50]、[251183,50]、[133206,63]、[22155116]、[26160219]；
var点=[35120317511709792]；
var p0={x:37，y:144}；
变量p1={x:267，y:143}；
变量p2={x:651，y:129}；
变量p3={x:794，y:96}；
var航路点=立方体边界点（p0、p1、p2、p3）；
var currentIndex=0；
var半径=10；
//
请求动画帧（动画）；
//画彩虹曲线的东西
函数drawCurve（）{
ctx.save（）；
ctx.moveTo（37144）；
ctx.bezierCurveTo（267143651129794,96）；
ctx.lineTo（794158）；
ctx.lineTo（37158）；
ctx.closePath（）；
ctx.fill（）；
ctx.globalCompositeOperation='source-top'；
对于（var i=0；iMarkE的回答很好（他应该得到赏金），但当我看到De Casteljau的算法并仔细观察时，我觉得这是一个编写软件的数学家，而不是一个做数学的程序员

在计算中使用传递的参数作为中间变量，可以删除一些操作，从而改进算法。这是同一个数学函数，其偏差不超过+/-1e-14（在Javascript浮点中，这是最接近的）

因为没有更好的名字cubicQ

function cubicQ(t, a, b, c, d) {
    a += (b - a) * t;
    b += (c - b) * t;
    c += (d - c) * t;
    a += (b - a) * t;
    b += (c - b) * t;
    return a + (b - a) * t; 
}

在这种情况下，需要ctx所要求的二阶多项式

function quadQ(t, a, b, c){
    a += (b - a) * t;
    b += (c - b) * t;
    return a + (b - a) * t;
}

其中a，b，c是曲线上的x或y点，b是控制点。t是测试和验证的位置0。但是我几天内不会接受它，因为我想加上悬赏并给你。这是我收到的最好的答案。不仅通过了，而且解释得很好。非常感谢。现在，t是什么他认为两个人来自同一个地方，在同一个行业（会计/ADP）工作，并计划悬赏，以得到一个以前多次得到回答的答案？：）@托罗克斯。没有关系……真的！我在亚特兰大住了7年，直到我们的孩子分别上了大学和职业学校。现在我们回到了阳光明媚的佛罗里达州中部。：-）干杯！虽然看起来很相似，但曲线下的填充物也增加了复杂性。而且我从未见过马克，而且我已经有两周没有为adp工作了。我很关心erbuilder现在。需要更新我的个人资料。你是如何让曲线如此完美地匹配的？有没有一个工具可以帮助绘制？而且线条有点参差不齐如何提高分辨率使其更平滑？有人请重新打开此文件，以便我可以添加赏金和赏金@markEStill replicate of no？赏金可以授予原始答案仅供参考。它有一些相似之处，但填充路径对我来说也是非常具有挑战性的。有了这一部分，答案就完整了。@Blindman67。哈哈！你说得对！我是一名会计，在我的“日常工作”中，所以是的，我倾向于（过度地？）关注精确性——当银行报告他们“大约”时，持有107.35美元的人会皱眉他们账户上有一百美元！我喜欢你对传统的三次和二次区间的更快的近似。你介意我把你的代码添加到我的“工具箱”中吗？嗯，canvas应该实现类似于SVG的
getPointAtLength
的功能，这样我们就不必重新填充该功能了。干杯！@markE如果我不想让每个人都得到他们需要的东西，我就不会发帖子了。让我感到困惑的是，W3C正在努力定义SVG，W3C起草SVG2，而canvas却什么都没有。canvas就是一切在这里，它扼杀了flash，几乎所有的广告都是基于画布的。你真的必须寻找SVG，当你看到它时，只有静态图像，这真的是一种资源浪费。画布非常需要一些小的调整来真正解锁GPU，和一些本机函数，比如
getPointAtLength
，但W3C说，都完成了！为什么他们必须要鞭打dead马（SVG），当纯种马刚开始热身时。@Blindman67.是的，我同意SVG正在得到W3C的大部分关注。太糟糕了，因为画布是一个很好的选择…我认为它是Flash+Photoshop--现在这是一个很好的组合！和（！），当Path2D与跨浏览器兼容时，我们可以将所有这些SVG数据路径直接绘制到画布上是一个令人惊叹的数据可视化工具，我离不开它。：-@markE我来自另一个方向，游戏、模拟，多年来一直远离商业应用。很容易忘记商业世界的数据驱动需求。
function linearQ(t, a, b){
    return a + (b - a) * t;
}