Rotation d'une image, animation
Soyez le premier à donner votre avis sur cette source.
Vue 21 473 fois - Téléchargée 1 583 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).
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.
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
- Javascript rotate animation
- Javascript rotate image - Meilleures réponses
- Rotation image javascript - Meilleures réponses
- Javascript : Menu animé - CodeS SourceS - Guide
- Javascript : Une animation magnifique - CodeS SourceS - Guide
- Javascript : Menu animé avec image survolée ! - CodeS SourceS - Guide
- Javascript : Rotation avec "quaternion" - CodeS SourceS - Guide
- Javascript rotation image - Forum - Javascript / DHTML
Tu as raison, c'est un petit bout de code, mais c'est une belle brique qui servira à monter une multitude d'édifices.
Bon codes sources.
C'est pas mal... Continue!
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.