Soyez le premier à donner votre avis sur cette source.
Vue 21 473 fois - Téléchargée 1 583 fois
<!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>
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.