1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Rotation d'une image, animation

Rotation d'une image, animation

Soyez le premier à donner votre avis sur cette source.

Vue 19 547 fois - Téléchargée 1 488 fois

Télécharger le projet
Commenter

Description

Voici un tout petit code qui permet de faire tourner une image en animation.

Depuis quelques années, HTML5 a introduit l'élément "canvas" qui convient pour la représentation graphique et qui contient un système de transformations 2D complet.
Mais il faut donc utiliser un navigateur "à jour" pour tester ce programme.

Initialement, on introduit une translation de la moitié des dimensions de l'image pour y déplacer l'origine (du système de coordonnées).
Ensuite, à chaque étape, on fait une petite rotation (autour de cette nouvelle origine).
L'image doit être centrée (par rapport à la nouvelle origine).

Source / Exemple : 


<!DOCTYPE html>
<html>
<head>
  <title>Rotation d'une image, animation</title>
  <script type="text/javascript">
  //<![CDATA[
    var cv,ctx,tmr,ima=new Image(),W=400,H=400; // dimensions de l'image
    var k,n=240,a=Math.PI/n; // n: nombre de pas pour faire un demi-tour
    var ap="Cliquez pour voir 'après'",av="Cliquez pour voir 'avant'";
    
    function Drw() {
      ctx.rotate(a); ctx.drawImage(ima,-W/2,-H/2,W,H);
      if (++k>=n) {clearInterval(tmr); cv.title=((a=-a)>0)?ap:av;}
    }
    function Ini() {
      cv=document.getElementById('cv'); cv.width=W; cv.height=H; cv.title=ap;
      ctx=cv.getContext('2d'); ctx.translate(W/2,H/2);
      ima.onload=function() {ctx.drawImage(ima,-W/2,-H/2,W,H);}
      ima.src='img.jpg';
    }
    function Clk() {k=1; tmr=setInterval('Drw()',20);}
  //]]>
  </script>
</head>
<body style='background-color:#BBBBBB;' onload='Ini()'>
  <canvas id='cv' onclick='Clk()' style='cursor:pointer'>
    Your browser does not support HTML5 canvas
  </canvas>
  <div>
    Cliquez pour tourner l'image.<br/><br/>
    <a href='http://www.william-voirol.ch/Prog/Transformations/RotImage.zip'>
      Zip du code
    </a>
  </div>
</body>
</html>

Conclusion :


Faites directement un test: (observez la remarque ci-dessous)
http://www.william-voirol.ch/Prog/Transformations/RotImage

Remarque: de temps en temps, des espaces (caractères blancs) s'immiscent
dans certains textes. (CodeS-SourceS est au courant du problème).
Si c'était le cas ici, enlevez les espaces avant d'utiliser l'adresse Web ci-dessus.

L'exemple complet se trouve sur le fichier zip.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
Messages postés
6
Date d'inscription
lundi 4 janvier 2010
Statut
Membre
Dernière intervention
5 septembre 2011
Clair net et précis !
Tu as raison, c'est un petit bout de code, mais c'est une belle brique qui servira à monter une multitude d'édifices.
Signaler
Messages postés
103
Date d'inscription
mardi 12 juillet 2011
Statut
Membre
Dernière intervention
3 janvier 2013
Bonjours,

Bon codes sources.
C'est pas mal... Continue!
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (William VOIROL)