Canvas - make element делает плавный поворот заданного радиуса и угла

Question

Я пытаюсь выяснить, как сделать элемент перемещением с JS на холсте, вот что я подготовил: https://jsfiddle.net/ge1o2bt1/.

Так, например, я хочу, чтобы функция-конструктор на «частице» имела функцию, называемую поворотом, которую вы можете пропустить, и радиус, и, например, он повернется, если он будет x++; y+=0 после поворота на 90º, он должен идти x+=0; y++.

Вот код, который перемещает объект (внутри конструктора):

this.move = function(){ 
    this.x+=1; 
}; 

то это нарисовано на холсте на основе х и у позиции. Заранее спасибо, я пробовал много вещей, например, используя Math.cos и Math.sin или используя context.rotate с save() и restore(). Я не очень хорош в математике, поэтому я не мог понять, как это сделать.

EDIT: используя некоторый учебник, я мог бы реорганизовать код и сделать это: https://jsfiddle.net/g2c9hf1p/. Теперь, когда вы нажимаете, объект поворачивается на x градусов (я устанавливаю его на 90), но вы не можете дать радиус, потому что он зависит от скорости.

Answer 1

Вы можете использовать переменную для направления и массив с объектами, который сохраняет приращения для координат.

var direction = 0; 
var directions = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }]; 

Чтобы изменить координату, просто добавьте направление.

this.move = function() { 
    this.x += directions[direction].x; 
    this.y += directions[direction].y; 
}; 

Для изменения направления, направления приращения и предела по длине.

window.addEventListener('click', function() { 
    direction++; 
    direction = direction % directions.length; 
}); 

function randomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1) + min); 
 
} 
 

 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var width = window.innerWidth; 
 
var height = window.innerHeight; 
 

 
canvas.width = width; 
 
canvas.height = height; 
 

 
var t = 0; 
 

 
function clearCanvas() { 
 
    ctx.fillStyle = "#000"; 
 
    ctx.fillRect(0, 0, width, height); 
 
} 
 

 
clearCanvas(); 
 

 
function circle(x, y, radius) { 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, radius, 0, 2 * Math.PI); 
 
    ctx.closePath(); 
 
} 
 

 
var part = new Particle(0, height/2); 
 

 
var rotation = 0; 
 

 
var direction = 0; 
 
var directions = [{ x: 1, y: 0 }, { x: 0, y: 1 }, { x: -1, y: 0 }, { x: 0, y: -1 }]; 
 

 
function loop() { 
 
    part.move(); 
 
    part.draw(); 
 

 
    requestAnimationFrame(loop); 
 
    t++; 
 
} 
 

 
function Particle(x, y) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.color = 'hsl(' + t + ',100%,50%)'; 
 
    this.radius = 1; 
 

 
    this.move = function() { 
 
     this.x += directions[direction].x; 
 
     this.y += directions[direction].y; 
 
    }; 
 

 
    this.draw = function() { 
 
     this.color = 'hsl(' + t + ',100%,50%)'; 
 
     ctx.fillStyle = this.color; 
 
     circle(this.x, this.y, this.radius); 
 
     ctx.fill(); 
 
    }; 
 
} 
 

 
loop(); 
 

 
window.addEventListener('click', function() { 
 
    direction++; 
 
    direction = direction % directions.length; 
 
}); 
 

 
window.addEventListener('resize', function() { 
 
    width = window.innerWidth; 
 
    height = window.innerHeight; 
 

 
    canvas.width = width; 
 
    canvas.height = height; 
 

 
    clearCanvas(); 
 
});

* { padding: 0; margin: 0; } 
 
body { overflow: hidden; }

<canvas id="canvas"></canvas>