¿Cómo se giraría una imagen alrededor de sí misma usando Canvas?
-
06-07-2019 - |
Pregunta
Tengo problemas para mover una imagen a su alrededor utilizando Canvas.
Como no puedes rotar una imagen, debes rotar el lienzo: si giro el lienzo en un grado, el origen alrededor del cual quiero rotar cambia. No entiendo cómo hacer un seguimiento de este cambio.
Este es mi código actual: http://pastie.org/669023
Y hay una demostración en http://preview.netlashproject.be/cog/
Si quieres darle una oportunidad, el código comprimido y la imagen se encuentran en http: / /preview.netlashproject.be/cog/cog.zip
Solución
He arreglado tu código:
var rotation = 0;
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.save();
ctx.clearRect(0,0,200,200);
ctx.translate(100,100); // to get it in the origin
rotation +=1;
ctx.rotate(rotation*Math.PI/64); //rotate in origin
ctx.translate(-100,-100); //put it back
ctx.drawImage(cog,0,0);
ctx.restore();
}
Lo importante aquí es que primero debes traducir la imagen al origen antes de rotarla, ¡y volver a traducirla!
Otros consejos
parece que esto podría ser algo que podrías usar: http://wilq32.googlepages.com/ wilq32.rollimage222
aquí hay una prueba de ello: http://www.antiyes.com/test/index .php