Javascript Girl
  1. Javascript Girl
  3. Faire pivoter une image autour de son centre en toile
Intereting Posts
Une application Backbone.js peut-elle être progressivement améliorée et naviguer par les moteurs de recherche? Obtenir l'URL de base de la racine du site Web (URL absolue / relative) Est-il possible d'obtenir la propriété css actuelle lors d'une transition en Javascript? JavaScript: comment tester si une variable n'est pas NULL Comment modifier la valeur d'une entrée html reliée au kendo Renvoi du nom d'un en-tête de colonne Temporisation avec le panneau Firebug Net: Quel est le temps de charge? Comment promettre les fonctions child_process.exec et child_process.execFile de Node avec Bluebird? Mise à jour du champ de saisie éditable x en fonction de la valeur retournée Ouvrez plusieurs onglets avec jQuery Uncaught TypeError: Impossible de lire la propriété 'apply' of indefined with phaser Js contenteditable – empêcher l'écriture dans l'élément nouvellement inséré Karma + JSPM + TypScript – introuvable '.ts.js' HMAC dans Node.js crypto vs. Google Apps Script (GAS) NodeJS Timeout a Promise si l'échec a été effectué dans le temps

Faire pivoter une image autour de son centre en toile

J'essaie de faire ma première image d'animation sur toile. Je veux que l'image tourne mais quelque chose n'est pas correct dans mon code. Des idées? Ceci est tout dans un document jquery 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); }

Modifiez simplement l'ordre de votre code, c'est-à-dire, 

 ctx.rotate(...); ctx.drawImage(...);

Voir un exemple de travail http://jsbin.com/owuyiq/ 

 $(function () { var canvas = document.getElementById('logobg1'); var ctx = canvas.getContext('2d'); var img = new Image(); var ang = 0; //angle var fps = 1000 / 25; //number of frames per sec img.onload = function () { //on image load do the following stuff canvas.width = this.width << 1; //double the canvas width canvas.height = this.height << 1; //double the canvas height var cache = this; //cache the local copy of image element for future reference setInterval(function () { ctx.save(); //saves the state of canvas ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas ctx.translate(cache.width, cache.height); //let's translate ctx.rotate(Math.PI / 180 * (ang += 5)); //increment the angle and rotate the image ctx.drawImage(img, -cache.width / 2, -cache.height / 2, cache.width, cache.height); //draw the image ;) ctx.restore(); //restore the state of canvas }, fps); }; img.src = 'http://i.stack.imgur.com/Z97wf.jpg?s=128'; //img });

Basé dans la réponse acceptée, cet exemple vous permet d'utiliser une taille de canevas fixe (et non par rapport à la taille de l'image): 

 $(function () { var canvas = document.getElementById('logobg1'); var ctx = canvas.getContext('2d'); var img = new Image(); var ang = 0; //angle var fps = 1000 / 25; //number of frames per sec img.onload = function () { //on image load do the following stuff canvas.width = 200; //Any width canvas.height = 500; //Any height var cache = this; //cache the local copy of image element for future reference var iw = cache.width; var ih = cache.height; setInterval(function () { ctx.save(); //saves the state of canvas ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas ctx.translate(canvas.width/2, canvas.height/2); //let's translate ctx.rotate(Math.PI / 180 * (ang += 5)); //increment the angle and rotate the image ctx.translate(-(canvas.width/2), -(canvas.height/2)); //let's translate ctx.drawImage(img, canvas.width/2 - iw/2, canvas.height/2 - ih/2, iw, ih); //draw the image ;) ctx.restore(); //restore the state of canvas }, fps); }; img.src = 'https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300'; //img });

Exemple de travail: jsbin.com/suwovibove/

Remarque: essayez de supprimer "ctx.save" et "ctx.restore" pour un spin cool.