Rotation d'une image, animation

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

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)