Rotation d'une image, animation

Soyez le premier à donner votre avis sur cette source.

Vue 18 806 fois - Téléchargée 1 432 fois

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.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

HACKANDROID
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!
9uigui
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.

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.