javascript - 如何让一个对象绕着html5 Canvas 中的一个点转动

Question

问题如下图所示

换句话说，如何精确计算每一帧的x和y坐标？

ctx.arc(x,y,radius,0,pi*2,false)

因为在增加一个坐标后，我遇到了如何计算另一个坐标的问题

我试过了，但没用

var step=2,x=100,y=100,r=50,coordinates=[[x,y-r]];
for(var i=1;i <r;i+=step){
bx=x;
x+=step;
y=y-Math.sqrt(Math.pow(r,2)-Math.pow(bx-x,2))
coordinates[i]=[x,y];
}

如果有 jsfiddle 将不胜感激。

Answer 1

var canvas = document.querySelector("#c");
var ctx = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var speed = 10; // Lower is faster


function animate(t){
    ctx.save();
    ctx.clearRect (0 , 0 ,canvas.width ,canvas.height );
    ctx.translate(canvas.width/2, canvas.height/2);
    
    // First circle
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
    
    // rotate + move along
    ctx.rotate((t/speed)/100);
    ctx.translate(100,0);
    
    // Orbiting cirle
    ctx.beginPath();
    ctx.arc(0, 0, 10, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();
    
    ctx.restore();
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

canvas {
    border: 1px solid black;
}

<canvas id="c" width="512" height="512"></canvas>