Question

我是画布工作的新手。我的挑战是通过弧将对象从一个静态坐标移动到另一个静态坐标。我使用了来自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/

Answer 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即可为中心行进，然后对角度和dist进行处理

从该数据中获取位置

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是物体沿弧线移动的位置。

画布，沿弧线从一点到另一点移动物体

1 个答案: