如何在 JavaScript 中沿某个角度移动对象？

Question

So I have an integer variable, and it's supposed to represent the angle that I want this object to move along, it looks like this:

const Degree = 90

Now obviously we need a object to move in this angle, so we can easily draw this to the canvas.

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
// ...
ctx.beginPath();
ctx.arc(0, 0, 3.75, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();

How can I move this little circle along the axis I set in the degrees variable?

Answer 1

One common option for learning about canvas animations is using Algebra (sin/cos) to calculate the distance to add for each value. Here is a very simple, non interactive example.

 const canvas = document.createElement("canvas"); canvas.height = 400; canvas.width = 400; const ctx = canvas.getContext("2d"); document.body.appendChild(canvas); var circle = new MovableCircle(); setInterval(function() { // This is our "game loop", the easiest way, not the best way ctx.beginPath(); ctx.clearRect(0, 0, canvas.width, canvas.height) circle.draw(); circle.x += Math.cos(DegreesToRadians(circle.direction)) * circle.speed; circle.y += Math.sin(DegreesToRadians(circle.direction)) * circle.speed; }, 1000 / 60) function MovableCircle() { this.x = 10; this.y = 10; this.speed = 1; this.direction = 45; this.draw = () => { ctx.arc(this.x, this.y, 20, 0, 2 * Math.PI); ctx.fillStyle = 'black'; ctx.fill(); } } function DegreesToRadians(degrees) { return degrees * (Math.PI / 180); }