画布，沿弧线从一个点移动到另一个点答案

【问题标题】：Canvas, moving object from point to point along the arc画布，沿弧线从一个点移动到另一个点
【发布时间】：2016-07-13 19:36:55
【问题描述】：

我是使用画布的新手。我的挑战是通过弧将对象从一个静态坐标移动到另一个。我使用了来自 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations 的太阳系代码示例，但是在浏览器中按 f5 后，我的对象仍保留在当前位置。我想在按 f5 后将对象返回到起点，并在对象到达最终位置时停止移动对象观点。

function draw() {
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,220,220); // clear canvas
ctx.save();
ctx.translate(110,110); //relative for canvas center;

//element
var time = new Date();
ctx.rotate( - ((2*Math.PI)/8)*time.getSeconds() - ((2*Math.PI)/8000)*time.getMilliseconds() );
ctx.translate(65,0);//moving radius
ctx.beginPath();//draw the arc
ctx.arc(10, 10, 6, 0, 2 * Math.PI, false);
//ctx.restore();
ctx.lineWidth = 10;
ctx.fillStyle = '#1e88e5';
ctx.fill();
ctx.strokeStyle = '#ffffff';
ctx.stroke();

// ctx.lineWidth = 5;


ctx.stroke();


ctx.restore();
window.requestAnimationFrame(draw);}window.requestAnimationFrame(draw);

https://jsfiddle.net/jkm5r5uu/

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

有很多方法可以做到这一点。这里只有一个

围绕固定中心点以恒定速度将物体从一个点移动到另一个点。这种方法将允许距离发生变化，并会走最短的弧线。

var sx = ?; // poition of object
var sy = ?;

var ex = ?; // end postion of object
var ey = ?;

var cx = ?; // the center point
var cy = ?;

先得到中心到起点和终点的角度

var sa = Math.atan2(sy-cy,sx-cx); // start angle
var ea = Math.atan2(ey-cy,ex-cx); // end angle

然后得到两者之间的角距离

var ad = ea-sa;
// get the shortest angle 
if(Math.abs(ad) > Math.PI){
    var a = Math.PI * 2 - Math.abs(ad);
    if(ad > 0){  // get the correct sign 
        a = -a;
    }
    // set the new angular distance
    ad = a;
}

然后得到从中心到开始和结束的距离

var sDist = Math.hypot(cx-sx,cy-sy); // Note IE does not support hypot use sqrt
var eDist = Math.hypot(cx-ex,cy-ey);

现在你已经有了你需要的所有信息，把它保存在一个对象中，这样你就可以在动画中使用它了

var moveArc = {
   dist : sDist, // start dist
   distChange: eDist-sDist, // change in distance
   angle : sa,  // start ang
   angleDist : ad,  // ang dist
   x : cx, // center of rotation x,y
   y : cy,
}

如果您知道要行驶的角度和距离，也可以只设置上述对象。如果旋转中心也在移动，则易于添加。只需添加 disatnce x,y 以使中心移动，然后对下面的角度和距离进行操作

从该数据中获取位置

function getArcPosition(amount, moveArc){ //amount is unit distance along
                                 // where 0 is at start
                                 // 0.5 is half way
                                 // 1 is at end
     // get the angle
     var ang = moveArc.angle + moveArc.angleDist * amount;
     // get the distance
     var dist = moveArc.dist + moveArc.distChange* amount;

     return {
         x: moveArc.x + Math.cos(ang) * dist,
         y: moveArc.y + Math.sin(ang) * dist
     }
}

在固定时间内应用它

timeToMove = 5000; // 5 seconds
startTime = ?; // time to start
now = ?; // current time

var pos = getArcPosition(Math.max(0,Math.min(1,(now-startTime)/timeToMove)),moveArc);

Pos 是沿弧线行进的对象的位置。

【讨论】：