Canvas, moving object from point to point along the arc

问题

I am novice in work with canvas. My challenge is moving object from one static coordinate to another by the arc. I have used code example of solar system from https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations , but after press on f5 in browser my object remains at the current location.I want to return my object to the starting point afet pressing f5 and to stop moving object when it get final point.

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/

回答1:

There are many many ways to do this. Here is just one

To move an object at constant speed from one point to another rotating about a fixed center point. This method will allow the distance to change and will travel the shortest arc.

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

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

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

First get the angle from the center to the start and ends points

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

Then get the angular distance between the two

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;
}

Then get the distances from the center to start and end

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

Now you have all the info you need, save it in an object so you can use it in the animation

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,
}

You can also just set up the above object if you know the angles and distances you want to travel. Easy to addapt if the rotation center is moving as well. Just add disatnce x,y for the center to travel and then do to that what is done to angle and dist below

To get the position from that data

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
     }
}

To apply that over a fixed time

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 is the position of the object traveling along an arc.

来源：https://stackoverflow.com/questions/38345829/canvas-moving-object-from-point-to-point-along-the-arc

标签

javascript

html

canvas