HTML5, CSS3, JavaScript Tome 3

Michel Martin

• Éditeur: Mediaforma Learning
• Année: 2014
• ISBN de l'eBook: 9782918819516
• Sujet: Informatique
• Sujet: Programmation en JavaScript

Cet eBook fait partie d'une série sur la programmation HTML5, CSS3 et JavaScript.Dans ce troisième tome, l'accent est mis sur les langages CSS3 et JavaScript. Vous y apprendrez entre autres à dessiner dans un canvas, à mettre en forme les éléments affichés dans une page, à tester la validité d'une adresse e-mail entrée par un utilisateur et beaucoup d'autres sujets tout aussi intéressants.Si vous n'avez que très peu de connaissances en programmation HTML/CSS/JavaScript, je vous rassure tout de suite, cet eBook est tout à fait adapté à votre profil. Il est cependant conseillé de lire les deux tomes précédents si vous faites vos premiers pas en programmation Web.

JavaScript - Canvas

Les bases de HTML5 Canvas

La balise <canvas> est une des grandes nouveautés du langage HTML 5. Par son intermédiaire, et grâce à quelques instructions JavaScript, vous pourrez dessiner des formes simples ou complexes en 2D ou en 3D.

Pour définir une balise <canvas>, il n’y a rien de plus simple. Ici par exemple, l’identifiant monCanvas est affecté à la balise <canvas> et ses dimensions sont fixées à 300 pixels sur 300. Remarquez le texte entre les balises <canvas> et </canvas>. Il s’affichera si le navigateur utilisé n’est pas compatible avec la balise <canvas>. La propriété CSS background-color fixe la couleur d’arrière-plan.

Voici à quoi ressemble ce code lorsqu’il est interprété dans Internet Explorer 9 :

Pour pouvoir travailler avec la balise <canvas>, il va falloir utiliser quelques lignes de JavaScript. Le but de ces instructions : récupérer le contexte du canevas afin de pouvoir lui adresser des instructions. Voici le code utilisé :

Le contexte du canevas est récupéré par la fonction JavaScript initialisation(). Dans un premier temps, on définit la variable el et on lui affecte l’élément canvas mis en place dans le code HTML5. Cette affectation se fait via la fonction getElementById() à laquelle on transmet l’identifiant de l’élément : monCanvas.

La deuxième instruction récupère le contexte 2D du canvas et le stocke dans la variable ctxt. C’est par l’intermédiaire de cette variable que nous allons pouvoir dessiner dans le canevas. La prochaine rubrique vous montrera comment procéder.

Un rectangle dans un canvas

Cette rubrique s’appuie sur la précédente. Elle va vous montrer comment tracer des rectangles dans un canevas.

Voici le code utilisé :

Le canevas mis en place est le même que dans la rubrique précédente. Pour y afficher un rectangle, nous avons inséré un bouton à l’aide d’un formulaire. Ce bouton exécute la fonction JavaScript rectangle() lorsqu’il est pressé.

Examinons cette fonction.

Les deux premières instructions de la fonction rectangle() vous sont familières. Elles récupèrent le contexte du canevas. Pour afficher un rectangle plein, on commence par définir sa couleur de remplissage en initialisant la propriété fillStyle du contexte. Ensuite, il suffit d’exécuter la fonction fillRect() à laquelle on transmet les coordonnées de l’angle supérieur gauche du rectangle, ainsi que la largeur et la hauteur du rectangle. Ici, le rectangle sera affiché à 10 pixels du bord gauche et à 40 pixels du bord supérieur du canevas. Il aura une largeur de 130 pixels et une hauteur de 60 pixels.

Voici le résultat :

Un cercle dans un canvas

Dans cette rubrique, vous allez apprendre à tracer des cercl...

Table des matières

• Page de titre
• INTRODUCTION
• HTML 5
• CSS 3 - Sélection
• CSS 3 - Mise en page
• CSS 3 - Mise en forme
• CSS 3 - Raccourcir l’écriture
• CSS3 - Dessiner
• JavaScript - Techniques diverses
• JavaScript - Accès au DOM
• JavaScript - Canvas