0 évaluation0% ont trouvé ce document utile (0 vote)

136 vues13 pages

HTML5 & CSS3

apprendre le HTML & CSS

Transféré par

Scar Angouan

Copyright

© © All Rights Reserved

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF ou lisez en ligne sur Scribd

• Télécharger
• EnregistrerEnregistrer HTML5 & CSS3 pour plus tard
• Partager
• 0%0% ont trouvé ce document utile, undefined
• 0%, undefined
• Imprimer
• Intégrer
• Signaler

Nous avons donc un div, pour le plein écran, la balise canvas pour le dessin de la spirale, et ensuite quatre span permettant d’afficher les boutons, Les styles de classe des span utilisent la police ModernPictogramsNormal pour afficher les pictogrammes. Ily a.un événement onload dans la balise body pour mettre en route V’ani- mation en appelant la fonction dessine () Une nouvelle instruction est utilisée dans la fonction dessine, c'est setIn— terval, I intezvid = setintervaliredessine, 1); Cette ligne de code permet d'appeler la fonction reDessine toutes les milli- secondes, done 1000 fois par seconde. La variable intervia, qui est une va- riable globale, permettra de mettre fin a ce set Lntezval. Car une fois lancé, le set Interval exécutera toutes les millisecondes la fonction reDessine, et si rien n'est prévu pour V'arréter, il faudra quitter le navigateur pour tout stopper.Les méthodes de dessin ___ 229 Chapitre 7 Avant de regarder ce que fait la fonction reDessine, voyons le code qui per- met de gérer le clavier. Il est écrit en utilisant jQuery et vous aurez sfirement autres occasions d’écrire ce gente de code qui enrichit jQuery. S (function) ( S (document) .keydown (function (eve) ( if (evt.keyCode === 32) | Af (courne bool) { ‘tourne bool = false; clearinterval (intervid) ; } else { ‘tourne_bool = true: intervid = setinterval (rebessine, 1); ) Af (evt keycode === 27) { tourne_bool = false; clearthterval (intervta) ; ne De La premitre ligne acctde & jQuery et permet d’ajouter une nouvelle fonction- nalité, La seconde ligne, avec le ke yciown, va intercepter les touches du clavier qui sont appuyées. Lorsque l’événement a lieu, le cade de la touche pressée est stocké dans la propriété de l’événement, keyCode. Pour ceux qui connaissent I'ASCII (American Standard Code for Information Interchange qui est le code américain normalisé pour l'échange d'information, Cest-a-dire une norme de codage des caractéres ; pour plus de détails, voir http://www.asciitable.com), le premier test est fait sur la barre d'espace, qui a pour keyCode 32. A différents endroits du code, il y a un booléen tourne_bool qui est lu et/ ou mis & jour, indiquant si la spirale tourne & ce moment-la ou non. Sila barre diespace est pressée et que tourne_bool est a true, alors le boo- léen passe & false, et la fonction clearInterval (intervId) ; est appe- lée. Crest ce clearinterval (intervid); qui va mettre un terme au set Interval défini précédemment.HTML5, JavaScript et CSS3 Pour créer votre premier site web Si la touche enfoncée a pour keyCode 27, cest la touche [Echap] (esc ou escape) du clavier qui stoppera l’animation. La partie suivante du code, avec $ (document) .ready (function () ( ) permet d'initialiser le click sures différents boutons : le passage ou la sortie du plein écran pour le premier, puis moinsVite();, plusVite(); et stopSpix () ; pourles trois autres boutons. MRemarque Anoter que le code pourle plein écran n‘est écrit que pour Chrome et Safari, soit les navigateurs utilisant webkit, Lapel par la fonction set Interval étant déja le plus rapide possible puisque paramétré sur une milliseconde, la solution pour modifier la vitesse sera d’augmenter ou de diminuer le pas entre chaque morceau de dessin de la spirale Nous avons done la fonction reDessine() qui est appelée 1000 fois par seconde. Elle va simplement définir le sens du dessin de la spirale et surtout appeler ensuite la fonction dessineSpirale () quis‘occupe réellement de dessiner la spirale dessineSpirale () commence avec la ligne de code = I canvas.width = canvas.widths Cette ligne va simplement permettre d’effacer le canvas. C’est le cas avec beaucoup de syst#mes de dessin, ott un dessin est cré¢ dans un premier temps. Ensuite, pour l'animer, l'ensemble est effacé pour étre & nouveau dessiné un peu plus loin, et ainsi créer animation. Le fait d’écrire que la largeur est égale ala largeur va en fait trés rapidement réinitialiser le canvas, et done l’effacer. © Feltons ENT Ait reseredLes méthodes de dessin Chapitre 7 Le code permettant de dessiner la spirale a été vu en dans le premier chapitre. Ici, il faut remarquer que la ligne suivante [var theta = angleDepart; est crite une premitze fois pour la premitze spirale, puis, une fois dessinée, le stylo est remis au centre et un nouvel angle de départ est défini a 'opposé du premier, puisque la moitié d’un cercle (PI/2) est ajouté. ctx.moveTo(0, 0); U7 on repart & 90° theta = anglebepart | Math.PI / 2 canvas permet d’afficher assez simplement une ombre. C’est ce que font les lignes qui finissent le dessin. Les propriétés shadow0ffsetX et shadow- of fset définissent le décalage de 'ombre, shadowB1ur [a taille du flou et le dernier parametre définit la couleur. J) onbre ‘cts. shadonOS feet shadow0ftsety shadowblur = 5 shadowColor = ‘rgba (0,0, 0/0.6)* 4a 4a: Une fois le tout dessiné, c'est la partie texte pour la vitesse daffichage qui est mise en place Deux variables sont utilisées ici: thisloop et lastLoop. last loop est Initialisée avec la date compléte au début du programme. Sa précision est de Yordre de la milliseconde. Lorsque le dessin de la spirale sera terminé, on stockera dans thisloop la date en cours, qui sera done plus grande que Lastloop, la différence entre les deux équivalant a la durée du dessin Au final, la variable thi sFrameTime contiendra la différence entre thi sloop et Last Loop, si bien que nous connaitrons le temps mis pour dessiner une spirale. var text = (1000 / frametine) .tofixed(l) +" tps", ctx.font = "iZpt Verdana"; ‘ctxt. textAlign ctx.textBaseline = "sop"; x.fillseyle = 'reb(0, 0,0); 231232 HTML5, JavaScript et CSS3 Pour créer votre premier site web Llaffichage de la vitesse étant en images par seconde, il faut partir de la valeur 1000, puisque le temps récupéré est en millisecondes, et la diviser par ramo- ‘Time pour avoir une valeur en relation avec les secondes. Linstruction . toFixed (1) permet d'arrondir a un chifére aprés la virgule le résultat de la division. Ensuite, les propriétés du canvas liges au texte sont utilisées pour définir la police utilisée et sa taille, Valignement et la couleur. La balise SVG Le format de dessin SVG permet de dessiner au travers de balises. Il peut étre créé dans un éditeur de code ou exporté & partir d'un logiciel de dessin vecto- tiel. 11 est également possible d’utiliser des CSS pour l'aspect et des scripts pour Vinteractivité. Dans l'exemple qui suit, le script est en fait de ECMAScript jemaraue Pour la petite histolre, ECMAScript ast d'origine du JavaScript. La technologie Flash utilise ActionScript qui découle également dECMAScript, ce qui rend les syntaxes trés proches. Exemple d’infobulle On pourrait écrire un livre complet sur le format SVG. L’exemple suivant va permettre d’avoir une idée sur ce qu'il est possible de faire. Le fichier 7_2_infoBulle.svg montre une animation et un peu d'interactivité “<2xml_version=" 0” encoding i L'en-téte du fichier SVG est du XML. Ensuite, l'entité (ENTITY) est l'équiva- lent d'une variable. Ici, dureeAnim mémorise le texte « 2s » qui sera la durée de I'animation faite en SVG. © Felons ENI- Ait resered