javascript - javascriptで円を描くにはどうすればよいですか

Question

私はjavascriptを使って太陽系を作ろうとしています.カーンアカデミーを使って作っています.何も見つかりません。ここに私のプロジェクトがあるので、私が何をしたか、その中で何ができるかを見ることができます

https://www.khanacademy.org/computer-programming/solar-system/6120244512161792

Answer 1

始めるために：

x = 100  // center
y = 50   // center
r = 50   // radius
a = 0    // angle (from 0 to Math.PI * 2)

function rotate(a) {
  
  var px = x + r * Math.cos(a); // <-- that's the maths you need
  var py = y + r * Math.sin(a);
  
  document.querySelector('#point').style.left = px + "px";
  document.querySelector('#point').style.top = py + "px";  
}


setInterval(function() {
  a = (a + Math.PI / 360) % (Math.PI * 2);
  rotate(a);
}, 5);

div {
  position: fixed;
  width: 10px;
  height: 10px;
}

#center {
  left: 100px;
  top: 50px;
  background: black;
}

#point {
  left: 0px;
  top: 0px;
  background: red;
}

<div id="center"></div>
<div id="point"></div>

Answer 2

カーン アカデミーで動作するコードを次に示します。

var x = 100;
var y = 100;
draw= function() {
    background(255, 0, 0);
    x=100*cos(frameCount);
    y=100*sin(frameCount);
    ellipse(x,y,20,20);
};

原点の周りを「周回」する楕円を描画します。うまくいけば、三角関数の基本的なデモンストレーションを行い、ニーズに合わせて推定できます。

Answer 3

カーン アカデミーの他のアニメーション レッスンを参照してください。このdraw()関数は、アニメーションを作成するために自動的に繰り返し実行されます。

したがって、関数内の値を変更draw()して何かを動かす必要があります。まず、円の方程式を見て、それを使って何かをしたいと思うでしょう。

ここにあなたが見ることができるスピンオフがあります.