Accueil > > > ROTATION D'UNE IMAGE, ANIMATION
 ROTATION D'UNE IMAGE, ANIMATION
 Information sur la source
 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
- <!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>
<!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.
 Sources du même auteur
ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUEONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUEA priori, la représentation par onglets n'a rien à voir avec le changement de langue.
En effet, le titre de cet article devrait être:
"Changer l'...
VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILESVECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES
En commençant à écrire quelques codes graphiques 3D basés sur l'axonométrie et la perspective, j'ai rapidement constaté qu'il me fallait un ensemble d...
DIALOGUE ENTRE FENÊTRES MÈRE ET FILLEDIALOGUE ENTRE FENÊTRES MÈRE ET FILLE
J'ai perdu beaucoup de temps à trouver sur le web les différents manières de dialoguer entre fenêtres.
Voici un petit exemple qui montre comment on p...
FRACTALES, FOUGÈRE, TRIANGLE, CARRÉFRACTALES, FOUGÈRE, TRIANGLE, CARRÉ
En 1974 (environ), Benoît Mandelbrot a inventé (découvert ?) les objets fractals (ou fractales).
Ce sont ces objets qui présentent une 'même' structu...
 Sources de la même categorie
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Faire une ROTATION d'une image avec HTML ou JAVASCRIPT ? [ par maxxcbenny ]
Bonjour,Quelqu'un connait-il le moyen de faire subir une rotation à une image dans un navigateur web ? Avec un angle libre de 0° à 360° évidement ?Par
afficher un menu ou une image sur passage de la souris [ par Prototype51 ]
Bonjour à tous, Je suis en train de créer mon premier site, conçu principalement en PHP. Jusqu'à présent j'ai réussi à tout faire grâce à PHP, je n'ai
mouvement images en Javascript [ par kartoon ]
Bonjour,J'ai plusieurs cas de figure et de faire la plus réalisable :Je voudrais avoir le moyen de pouvoir intervertir des images (3)
appeller une script [ par poitierjohan ]
Bonjour,Est-il possible d'appeller un script (écrit en JavaScript) qui est en dehors de ma page hmtl??Autrement dis, que ma page web dans la
Afficher une Image d'un odinateur distant [ par aline_ediark ]
Bonjour à tous,Voila j'ai un petit problème en javascript,Je voudrai afficher une image en javascript (et uniquement en javascript),Cependan
Javascript PHP et images popup [ par amewole ]
Voici mon problème : J'affiche dans une page html/php une dizaine de photos dans un tableau HTML et je veux que quand on clique sur une ima
Problème chargement image javascript [ par Travailleuuse06 ]
Bonjour,je suis devant un très gros problème que je n'arrive pas à résoudre. J'ai une page html où j'ai un <img src="image">Dans ma partie jav
Visite virtuelle 360 & javascript [ par stfrouille ]
Bonjour,ou plutot bonsoir ....J'ai pour projet de réaliser une visite virtuelle à partir d'image 360°, avec déplacement à la souris et tout le tralala
Transformer les images d'un compteur en texte [ par Fran6web ]
Bonjour à tous,Etant super nul en javascript, j'aurais besoin de votre aide.En effet j'ai réussi à trouvé sur le net un merveilleux script qui me perm
Recherche Animation d'image-effet brouillard [ par fogco ]
Je recherche un script à intégrer dans une page html pour donner une impression (animée) de brouillard ou brumisation sur une phot
|
Derniers Blogs
 IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|