如何让这个圈围绕这个圈转？答案

【问题标题】：How to make this circle revolve around this circle?如何让这个圈围绕这个圈转？
【发布时间】：2021-08-10 03:38:43
【问题描述】：

我正在尝试围绕红色圆圈移动蓝色圆圈并仅使用红色圆圈在画布上绘图。

问题：

我无法理解如何在蓝色圆圈围绕红色圆圈旋转并同时移动时保持两个圆圈的中心。
当它围绕红色圆圈旋转时，如何只使用红色圆圈而不绘制蓝色圆圈。

const canvas = document.getElementById('canvas1');

const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let positionX = 100;
let positionY = 100;
let X = 50;
let Y = 50;
let angle = 0;

function circle(){
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(X, Y, 20, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
}

function direction(){
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(positionX, positionY, 10, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
}

function animate(){
    ctx.clearRect(0,0, canvas.width, canvas.height);
    circle();
    direction();
    positionX += 0.5 * Math.sin(angle);
    positionY += 0.5 * Math.cos(angle);
    angle += 0.1;
    requestAnimationFrame(animate);
}

animate();

#canvas1{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas basics</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="canvas1"></canvas>
    
    <script src="script.js"></script>
</body>
</html>

【问题讨论】：

如果你有兴趣查看我的repo，你可以使用它并使用renature Working exemple of the repo调整它来制作太阳系

标签： javascript html css animation dom

【解决方案1】：

你的意思是这样吗？ - 我已将红色圆圈设置为向右移动。蓝色圆形轨道。

const canvas = document.getElementById('canvas1');

const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let positionX = 100;
let positionY = 100;
let X = 50;
let Y = 50;
let angle = 0;

function circle(){
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(X, Y, 20, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
}

function direction(){
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(positionX, positionY, 10, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
}

function animate(){
    ctx.clearRect(0,0, canvas.width, canvas.height);
    circle();
    direction();
    positionX = X + 35 * Math.sin(angle);
    positionY = Y + 35 * Math.cos(angle);
    X+=1 ;

    angle += 0.1;
    requestAnimationFrame(animate);
}

animate();

#canvas1{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas basics</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="canvas1"></canvas>
    
    <script src="script.js"></script>
</body>
</html>

【讨论】：

我的意思是添加 - 我只是稍微改变了 animate() 函数。
非常感谢。你能展示如何在红色圆圈移动时在画布上绘图吗？（即只有红色圆圈而不是蓝色圆圈）

【解决方案2】：

我没有清楚地了解您的所有问题，但是要将蓝色圆圈围绕红色旋转，您只需要正确设置值即可。

更新：在代码 cmets 中添加了红色圆圈的旋转 + 次要描述。

const canvas = document.getElementById('canvas1');

const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Here we set our start positions of
// circles. Keep in mind, that they will rotare not
// around it's centers, they will START rotation path
// from their centers
let positionX = 30;
let positionY = 59;
let X = 70;
let Y = 70;
let angle = 0;
let angle2 = 360;

function circle(){
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(X, Y, 20, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
}

function direction(){
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(positionX, positionY, 10, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
}

function animate(){
    ctx.clearRect(0,0, canvas.width, canvas.height);
    circle();
    direction();
    // Basically you use geometry and math,
    // you can search for Sin and Cos online.
    // Here we calculate angle position on each frame
    //
    // Calc animation for first circle
    // It (animation path) starts from the center of circle and goes counterclockwise
    // And returns to its position after 360 deg.
    positionX += 4 * Math.sin(angle);
    positionY += 4 * Math.cos(angle);
    // Calc animation for second circle
    // Same as previous but with less amount
    // And our start position (angle2) is 360
    X += 1 * Math.sin(angle2);
    Y += 1 * Math.cos(angle2);
    // Set angle of orbit - increase value each frame
    angle += 0.1;
    angle2 += 0.1;
    requestAnimationFrame(animate);
}

animate();

#canvas1{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas basics</title>
</head>
<body>
    <canvas id="canvas1"></canvas>
</body>
</html>

【讨论】：

哪些价值观和什么是正确的？
我们如何在移动时绑定这两个圆心？只需在function animate() 中添加X+=1 只会移动一圈。
@harsha 检查更新以回答 - 我添加了一些描述。