Javascript 在HTML画布中沿直线设置点的动画

我需要设置一个点的动画以沿着这条线（航路点）移动。它需要从顶部开始，沿红线向右移动，然后向下，沿蓝线移动，然后重复

我试图使用css，但我无法编程点沿着画布上的这条线移动

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.strokeStyle='#FF0000'；
ctx.moveTo（30,0）；
贝塞尔曲线图（60、320、150、320、600、330）；
ctx.stroke（）；
ctx.beginPath（）；
var ctx=canvas.getContext（“2d”）；
ctx.moveTo（15,0）；
ctx.strokeStyle='#000FFF'；
ctx.bezierCurveTo（0340100350600350）；
ctx.stroke（）；
ctx.beginPath（）；
var ctx=canvas.getContext（“2d”）；
ctx.moveTo（15,0）；
ctx.strokeStyle='#000FFF'；
ctx.lineTo（30,0）；
ctx.stroke（）；
ctx.beginPath（）；
var ctx=canvas.getContext（“2d”）；
ctx.moveTo（600330）；
ctx.strokeStyle='#000FFF'；
ctx.lineTo（600350）；
ctx.stroke（）
要实现这一点，您需要像这样计算航路点，
在你的例子中，你有一条曲线，要计算航路点有点棘手，但没有什么是不可能的

计算航路点见
设置航路点阵列循环中的点的动画
这是一个只有一行的小示例，您可以添加颜色或线条



var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var cBez1=[{x:30，y:0}，{x:60，y:320}，{x:150，y:320}，{x:600，y:330}]；
drawBez（cBez1）；
var cPoints=findCBezPoints（cBez1）；
设置间隔（timeanim，1）；
var-indexi=0；
var opr=-1；
函数timeanim（）
{
//重置视图
ctx.clearRect（0，0，cw，ch）；
drawBez（cBez1）；
//画点
ctx.fillStyle='red'；
ctx.beginPath（）；
弧（cPoints[indexi].x，cPoints[indexi].y，4,0，Math.PI*2）；
ctx.fill（）；
if（indexi+opr>cPoints.length-2 | | indexi+opr<0）{
opr*=-1；
}
indexi+=opr；
}
函数findCBezPoints（b）{
var startPt=b[0]；
var controlPt1=b[1]；
var controlPt2=b[2]；
var endPt=b[3]；
变量pts=[b[0]]；
var lastPt=b[0]；
var测试=5000；
对于（var t=0；tw）CSS在这里有什么帮助？为什么不继续使用画布？我不知道如何在js中进行动画思考，我需要为我的课堂做这件事，我们的老师希望我们单独学习。不要再发布相同的答案，如果你想让更多人查看你的问题，请添加奖励