Faire pivoter une image autour de son centre dans une toile
Je suis en train de faire ma première animation de l'image sur la toile. Je veux que l'image à faire pivoter, mais quelque chose n'est pas correct dans mon code. Des idées? Tout cela dans un jquery document prêt:
var canvas = document.getElementById('logobg1');
var ctx = canvas.getContext('2d');
var img = new Image(); //Create new Image object
img.src = 'images/containerbg.png'; //Set source path //set img src
img.onload = function(){ //when image loads
ctx.drawImage(img,0,0);
setInterval(function() {
ctx.save();
ctx.clearRect(-ctx.canvas.width/2, -ctx.canvas.height/2, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img,0,0);
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); //set canvas context to center
ctx.rotate(Math.PI / 180 * 0.5); //1/2 a degree
ctx.restore();
}, 16);
}
source d'informationauteur Mark Steggles
Vous devez vous connecter pour publier un commentaire.
il suffit de changer l'ordre de votre code, c'est à dire,
Voir un exemple de travail http://jsbin.com/owuyiq/
En fonction de la accepté de répondre, par exemple, permet d'utiliser un fixe en toile taille (et non par rapport à la taille de l'image):
De travail exemple: jsbin.com/suwovibove/
Note: essayez de supprimer "ctx.enregistrer" et "ctx.restaurer" pour un cool spin.