Une introduction à l'utilisation de la toile

Aujourd’hui, vous découvrirez une technologie Web appelée Canvas et son lien avec le modèle objet de document, communément appelé DOM. Cette technologie est extrêmement puissante car elle permet aux développeurs Web d’accéder à des éléments HTML et de les modifier au moyen de JavaScript..

Maintenant, vous pouvez vous demander pourquoi nous devons même nous préoccuper de JavaScript. Pour le dire simplement, HTML et JavaScript sont mutuels et interdépendants. Certains composants HTML, tels que le Toile élément, ne sont rien sans l'utilisation de JavaScript. Après tout, à quoi sert une toile si on ne peut pas dessiner dessus?

Afin de saisir le concept, j'ai pensé que nous pourrions travailler ensemble sur un exemple de projet dans lequel nous essaierons de dessiner un simple visage souriant. Alors plongeons-y.

Commencer

Commencez par créer un nouveau répertoire contenant les fichiers de votre projet, puis ouvrez votre éditeur de texte ou votre outil de développement Web préféré. Une fois que vous avez terminé, vous devez créer un index.html et un vide script.js, que nous allons continuer à éditer à mesure que nous avançons.

Ensuite, nous allons passer à modifier notre index.html, ce qui ne devrait pas prendre beaucoup de temps, car l'essentiel de notre projet sera écrit en JavaScript. Tout ce que nous avons à faire dans notre code HTML est de créer un élément de toile et une référence. script.js. C'est assez simple:

Donc, pour expliquer, j'ai utilisé un ensemble de balises pour les deux  et , et ainsi, nous pouvons ajouter plus d'éléments à notre document via le corps. Saisissant cette opportunité, je fais exactement cela avec un élément canvas 640x480 avec l'attribut id = 'toile'.

Cet attribut attache simplement une chaîne à un élément à des fins d'identification. Nous l'utiliserons plus tard pour localiser notre élément canvas dans notre fichier JavaScript. J'ai ensuite référencé notre fichier JavaScript en utilisant le > tag, dans lequel j'ai spécifié JavaScript comme type de langage et script.js comme chemin vers notre fichier désiré.

Manipuler le DOM

Comme son nom l'indique, nous allons devoir utiliser une interface avec le document HTML en utilisant un autre langage, dans ce cas, JavaScript. Pour cela, nous aurons besoin d’une brève introduction sur l’objet document intégré. Cet objet correspond directement à notre balises, et de même, il est la base de tout notre projet, car nous pouvons l'utiliser pour obtenir des éléments et pousser des changements.

var canvas = document.getElementById ('canvas');

Rappelez-vous comment nous avons défini un élément de toile avec le id = 'toile'? Maintenant, nous le récupérons du document HTML grâce à l'utilisation du document.getElementById méthode, dans laquelle nous passons simplement la chaîne correspondant à l'id de l'élément souhaité. Maintenant que nous l'avons saisi, nous pouvons commencer à l'utiliser pour dessiner.

Pour pouvoir réellement dessiner avec la toile, nous devons manipuler son contexte. Étonnamment, un canevas ne contient aucune méthode ni aucun attribut pour dessiner, mais son objet contextuel contient toutes les méthodes dont nous avons besoin. Un contexte est défini comme suit:

var context = canvas.getContext ('2d');

Chaque toile a quelques contextes différents et, pour les besoins de notre programme, nous n’aurons besoin que de celui qui est bidimensionnel. Ce contexte que nous avons créé aura toutes les méthodes de dessin nécessaires pour créer notre visage..

Avant de commencer, je dois vous informer que le contexte stocke deux couleurs en tant qu’attributs, l’une pour le trait et l’autre pour le remplissage. Pour notre visage souriant, nous devrons régler le remplissage sur jaune et le trait sur noir.

context.fillStyle = 'yellow'; context.strokeStyle = 'black';

Après avoir défini le contexte sur les couleurs souhaitées, il faut en fait tracer un cercle pour le visage. Malheureusement, le contexte n'a pas de méthode prédéfinie pour les cercles, nous devrons donc utiliser ce que nous appelons un chemin. Un chemin est simplement une série de lignes et de courbes jointes, et ce chemin est ensuite fermé lorsque le dessin est terminé..

context.beginPath (); context.arc (320, 240, 200, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath ();

Donc, pour expliquer, nous avons demandé au contexte de commencer un nouveau chemin. Ensuite, nous avons créé un arc au point (320, 240) avec un rayon de 200 pixels. Les deux derniers arguments spécifient les angles initial et terminal pour construire l'arc. Nous passons donc 0 et 2 * Math.PI radians afin de faire un cercle complet. Enfin, nous demandons au contexte de remplir et de tracer le chemin en fonction des couleurs déjà définies.

Bien que fermer le chemin ne soit pas une nécessité pour la fonction du script, nous devrons mettre fin au chemin afin de pouvoir en créer de nouveaux pour les yeux et la bouche de notre visage souriant. Les yeux sont réalisés exactement de la même manière, chacun avec un rayon plus petit et une position différente. Mais d'abord, nous devons nous rappeler de définir la couleur de remplissage en blanc.

context.fillStyle = 'white'; context.beginPath (); context.arc (270, 175, 30, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath (); context.beginPath (); context.arc (370, 175, 30, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath ();

Et c'est tout ce qui se passe avec les yeux. Maintenant, la bouche est très similaire, mais cette fois nous ne remplirons pas l'arc et notre angle sera configuré comme un demi-cercle. Pour ce faire, nous devons définir l’angle de départ à zéro et l’angle final à -1 * Math.PI. Et rappelez-vous, n'oubliez pas de définir la couleur du trait en rouge.

context.fillStyle = 'red'; context.beginPath (); context.arc (320, 240, 150, 0, -1 * Math.PI); context.fill () context.stroke (); context.closePath ();

Toutes nos félicitations

Bon travail. Vous êtes arrivé à la fin du didacticiel et vous avez créé un sourire fantastique tout en en apprenant beaucoup plus sur Canvas, HTML, JavaScript et le modèle d'objet document. Si vous avez des questions, n'hésitez pas à laisser un commentaire. Cliquez ici pour voir le programme en action.