今天我得到了一个设计，它是一个沿着曲线移动的圆圈。我用纯 css 到目前为止所取得的进展创建了一个 JSBin，但我觉得我的方向是错误的。我认为也许用画布更好，但我不知道从哪里开始。这不仅仅是沿着一条线绘制，它还填充了条形。
Fiddle
这是设计：
以下是我目前为止对 CSS 的了解：
以下是如何沿着曲线（三次贝塞尔曲线）对圆进行动画处理。
使用画布绘制曲线context.bezierCurveTo method.
使用一系列画布关闭你的彩虹路径context.lineTo method.
要仅用彩虹颜色填充弯曲路径，您可以使用context.clip限制绘图仅在路径内显示。然后你可以使用context.fillRect填充您的多色带。
Use requestAnimationFrame创建一个动画循环，沿着曲线在不断增加的路点处绘制球。
使用以下方法计算沿曲线的路点De Casteljau's Algorithm
这是示例代码和演示：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var colors=[[229,133,50],[251,183,50],[133,206,63],[22,155,116],[26,160,219]];
var points=[35,120,317,511,709,792];
var p0={x:37,y:144};
var p1={x:267,y:143};
var p2={x:651,y:129};
var p3={x:794,y:96};
var waypoints=cubicBezierPoints(p0,p1,p2,p3);
var currentIndex=0;
var radius=10;
//
requestAnimationFrame(animate);
// draw the rainbow curve thing
function drawCurve(){
ctx.save();
ctx.moveTo(37,144);
ctx.bezierCurveTo(267,143,651,129,794,96);
ctx.lineTo(794,158);
ctx.lineTo(37,158);
ctx.closePath();
ctx.fill();
ctx.globalCompositeOperation='source-atop';
for(var i=0;i<points.length-1;i++){
var c=colors[i];
ctx.fillStyle='rgb('+c[0]+','+c[1]+','+c[2]+')';
ctx.fillRect(points[i],0,points[i+1],ch);
}
ctx.restore();
}
//
function drawBall(){
var pt=waypoints[currentIndex];
ctx.beginPath();
ctx.arc(pt.x,pt.y,radius,0,Math.PI*2);
ctx.fillStyle='white';
ctx.fill();
ctx.strokeStyle='black'
ctx.lineWidth=3;
ctx.stroke();
}
// the animation loop
function animate(){
ctx.clearRect(0,0,cw,ch);
drawCurve();
drawBall();
ctx.beginPath();
currentIndex++;
if(currentIndex<waypoints.length){
requestAnimationFrame(animate);
}
}
// calculate the waypoints
function cubicBezierPoints(p0,p1,p2,p3){
var ticksPerSecond=60;
var seconds=4;
var totalTicks=ticksPerSecond*seconds;
var pts=[];
for(var t=0;t<totalTicks;t++){
pts.push(getCubicBezierXYatT(p0,p1,p2,p3,t/totalTicks));
}
return(pts);
}
// De Casteljau's algorithm which calculates points along a cubic Bezier curve
// plot a point at interval T along a bezier curve
// T==0.00 at beginning of curve. T==1.00 at ending of curve
// Calculating 100 T's between 0-1 will usually define the curve sufficiently
function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
return({x:x,y:y});
}
// cubic helper formula at T distance
function CubicN(T, a,b,c,d) {
var t2 = T * T;
var t3 = t2 * T;
return a + (-a * 3 + T * (3 * a - a * T)) * T
+ (3 * b + T * (-6 * b + b * 3 * T)) * T
+ (c * 3 - c * 3 * T) * t2
+ d * t3;
}body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }<canvas id="canvas" width=820 height=200></canvas>