Javascript fazendo a imagem girar para sempre olhar o cursor do mouse?
Estou tentando fazer com que uma seta aponte para o cursor do mouse em javascript. No momento, ele gira violentamente, em vez de apontar para o cursor.
Aqui está um violino do meu código:https://jsfiddle.net/pk1w095s/
E aqui está o código:
var cv = document.createElement('canvas');
cv.width = 1224;
cv.height = 768;
document.body.appendChild(cv);
var rotA = 0;
var ctx = cv.getContext('2d');
var arrow = new Image();
var cache;
arrow.onload = function() {
cache = this;
ctx.drawImage(arrow, cache.width/2, cache.height/2);
};
arrow.src = 'https://d30y9cdsu7xlg0.cloudfront.net/png/35-200.png';
var cursorX;
var cursorY;
document.onmousemove = function(e) {
cursorX = e.pageX;
cursorY = e.pageY;
ctx.save(); //saves the state of canvas
ctx.clearRect(0, 0, cv.width, cv.height); //clear the canvas
ctx.translate(cache.width, cache.height); //let's translate
var centerX = cache.x + cache.width / 2;
var centerY = cache.y + cache.height / 2;
var angle = Math.atan2(e.pageX - centerX, -(e.pageY - centerY)) * (180 / Math.PI);
ctx.rotate(angle);
ctx.drawImage(arrow, -cache.width / 2, -cache.height / 2, cache.width, cache.height); //draw the image
ctx.restore(); //restore the state of canvas
};