ホーム » blog » 動作検証🫠

動作検証🫠

https://358tool.com/furiko3/

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let angle = Math.PI / 90;
let angularVelocity = 0.01;
let angularAcceleration = 0;
let pivotX = canvas.width / 2;
let pivotY = 250;
let ballX = pivotX + Math.sin(angle) * 100;
let ballY = pivotY + Math.cos(angle) * 100;

function drawPendulum() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(pivotX, pivotY);
  ctx.lineTo(ballX, ballY);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(ballX, ballY, 20, 0, 2 * Math.PI);
  ctx.fill();
  angle += angularVelocity;
  angularVelocity += angularAcceleration;
  ballX = pivotX + Math.sin(angle) * 100;
  ballY = pivotY + Math.cos(angle) * 100;
  requestAnimationFrame(drawPendulum);
}

drawPendulum();

--タグ--
angle,angularAcceleration,angularVelocity,ballX,ballY,ctx.arc,ctx.beginPath,ctx.clearRect,ctx.fill,ctx.lineTo,ctx.moveTo,ctx.stroke,drawPendulum,getElementById,Math.cos,Math.PI,Math.sin,pivotX,pivotY,requestAnimationFrame


サイトについて

雑記帳:ログとして書いています、良い記事があればシェアお願いします。


RSS