javascript-在HTML画布内沿线对点进行动画处理

概述这个问题已经在这里有了答案：            >            I want to do animation of an object along a particular path                                    2个我需要设置动画点以沿此线(航路点)移动.它需要从顶部开始,沿红线向右移动,然后向下

这个问题已经在这里有了答案：            >            I want to do animation of an object along a particular path                                    2个
我需要设置动画点以沿此线(航路点)移动.它需要从顶部开始,沿红线向右移动,然后向下沿蓝线移动并重复.

我尝试使用CSS,但无法编写点沿画布上的这条线移动

var canvas = document.getElementByID("myCanvas");var ctx = canvas.getContext("2d");ctx.beginPath();ctx.strokeStyle = '#FF0000';ctx.moveto(30,0);ctx.bezIErCurveto(60,320,150,600,330);ctx.stroke();ctx.beginPath();var ctx = canvas.getContext("2d");ctx.moveto(15,0);ctx.strokeStyle = '#000FFF';ctx.bezIErCurveto(0,340,100,350,350);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(600,330);ctx.strokeStyle = '#000FFF';ctx.lineto(600,350);ctx.stroke();

<canvas ID="myCanvas" height="350px;" wIDth="600px"></canvas>

最佳答案为此,您需要像这样计算Waypoint example – jsfiddle,
在您的情况下,您有一条Curve并计算Waypoint有点棘手,但没有什么不可能

>计算航点,请参阅this answer
>在Waypoints数组循环中的动画点

这是一个只有一行的小示例,您可以添加颜色或线条

jsfiddle

var canvas=document.getElementByID("canvas");var ctx=canvas.getContext("2d");var cw=canvas.wIDth;var ch=canvas.height;var cBez1=[{x:30,y: 0},{x:60,y:320},{x:150,{x:600,y:330}];drawBez(cBez1);var cPoints=findCBezPoints(cBez1);setInterval(timeanim,1);var indexi =0;var opr = -1;function timeanim(){	//reset vIEw	ctx.clearRect(0,cw,ch);	drawBez(cBez1);	//draw dot    ctx.fillStyle='red';    ctx.beginPath();    ctx.arc(cPoints[indexi].x,cPoints[indexi].y,4,Math.PI*2);    ctx.fill();      if(indexi + opr > cPoints.length-2 ||  indexi + opr < 0){  	opr *= -1;  }  indexi += opr;}function findCBezPoints(b){  var startPt=b[0];  var controlPt1=b[1];  var controlPt2=b[2];  var endPt=b[3];  var pts=[b[0]];  var lastPt=b[0];  var tests=5000;  for(var t=0;t<=tests;t++){    // calc another point along the curve    var pt=getCubicBezIErXYatT(b[0],b[1],b[2],b[3],t/tests);    // add the pt if it's not already in the pts[] array    var dx=pt.x-lastPt.x;    var dy=pt.y-lastPt.y;    var d=Math.sqrt(dx*dx+dy*dy);    var dInt=parseInt(d);    if(dInt>0 || t==tests){      lastPt=pt;      pts.push(pt);    }  }  return(pts);}// Given the 4 control points on a BezIEr curve // Get x,y at interval T along the curve (0<=T<=1)// The curve starts when T==0 and ends when T==1function 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 formulafunction 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;}function drawPlots(pts){  ctx.fillStyle='red';  // don't draw the last dot b/ its radius will display past the curve  for(var i=0;i<pts.length-1;i++){    ctx.beginPath();    ctx.arc(pts[i].x,pts[i].y,1,Math.PI*2);    ctx.fill();  }}function drawBez(b){  ctx.linewidth=2;  ctx.beginPath();  ctx.moveto(b[0].x,b[0].y);  ctx.bezIErCurveto(b[1].x,b[1].y,b[2].x,b[2].y,b[3].x,b[3].y);  ctx.stroke();}

  <canvas ID="canvas" wIDth=700 height=600></canvas>

总结

以上是内存溢出为你收集整理的javascript-在HTML画布内沿线对点进行动画处理 全部内容，希望文章能够帮你解决javascript-在HTML画布内沿线对点进行动画处理 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。