Maison > Article > interface Web > Code pour dessiner des visages souriants à l'aide de Canvas en HTML5
Code pour dessiner des visages souriants à l'aide de Canvas en HTML5
- 不言original
- 2018-07-02 11:21:076070parcourir
Cet article présente principalement le tutoriel d'utilisation de Canvas en HTML5 pour dessiner un visage souriant. Utiliser Canvas pour dessiner est une fonction de base en HTML5. Les amis qui en ont besoin peuvent s'y référer
Aujourd'hui, Vous découvrirez une technologie Web appelée Canvas et ses liens avec le modèle objet de document (souvent appelé DOM). Cette technologie est très puissante car elle permet aux développeurs Web d'accéder et de modifier des éléments HTML en utilisant JavaScript.
Maintenant, vous vous demandez peut-être pourquoi nous devons utiliser JavaScript à si grande échelle. En bref, HTML et JavaScript sont interdépendants et certains composants HTML, tels que l'élément canvas, ne peuvent pas être utilisés indépendamment de JavaScript. Après tout, à quoi sert une toile si on ne peut pas dessiner dessus ?
Pour mieux comprendre ce concept, essayons de dessiner un simple visage souriant à travers un exemple de projet. Commençons.
Démarrer
Commencez par créer un nouveau répertoire pour enregistrer les fichiers de votre projet, puis ouvrez votre éditeur de texte ou outil de développement Web préféré. Une fois cela fait, vous devez créer un index.html vide et un script.js vide, que nous continuerons à éditer plus tard.
Ensuite, modifions le fichier index.html, ce qui n'impliquera pas grand-chose puisque la majeure partie du code de notre projet sera écrite en JavaScript. Ce que nous devons faire en HTML, c'est créer un élément canevas et référencer script.js, ce qui est assez simple :
<!DOCTYPE html><body> <canvas id='canvas' width='640' height='480'></canvas> <script type='text/javascript' src='script.js'></script> </body></html>
Pour l'expliquer de cette façon, j'utilise un ensemble de balises f4c4880127ae9dd2e05b78c78da182f8 et 1d6e7d87652dd104f173dbf7284e2799, de cette façon, nous pouvons ajouter plus d'éléments au document via le corps. Saisissant cette opportunité, j'ai complété un élément de canevas de 640*480 avec l'attribut id canvas.
Cet attribut ajoute simplement une chaîne à l'élément pour une identification unique. Nous utiliserons cet attribut plus tard pour localiser notre élément canvas dans le fichier JavaScript. Ensuite, nous référençons le fichier JavaScript à l'aide de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, qui spécifie le type de langage JavaScript et le chemin d'accès au fichier script.js.
Manipulation du DOM
Comme son nom l'indique, "Document Object Model", nous devons accéder au document HTML en appelant l'interface en utilisant un autre langage. Ici, le langage que nous utilisons est JavaScript. Pour ce faire, nous devons placer une simple référence sur l’objet document intégré. Cet objet correspond directement à notre balise f4c4880127ae9dd2e05b78c78da182f8 et, de la même manière, c'est la base de l'ensemble du projet car nous pouvons accéder aux éléments et effectuer des modifications via celle-ci.
var canvas = document.getElementById('canvas');
Vous souvenez-vous de la façon dont nous avons utilisé id="canvas" pour définir un élément de canevas ? Maintenant, nous utilisons la méthode document.getElementById pour obtenir cet élément du document HTML, nous transmettons simplement la chaîne correspondant à l'identifiant de l'élément requis. Maintenant que nous avons obtenu cet élément, nous pouvons commencer à peindre avec.
Pour dessiner avec une toile, nous devons manipuler son contexte. Étonnamment, un canevas ne contient aucune méthode ou propriété pour dessiner, mais son objet contextuel possède toutes les méthodes dont nous avons besoin. Une définition de contexte ressemble à ceci :
var context = canvas.getContext('2d');
Chaque canevas a plusieurs contextes différents En fonction de l'objectif du programme, un seul contexte bidimensionnel suffit. qui obtiendra toutes les méthodes de dessin dont nous avons besoin pour créer un visage souriant.
Avant de commencer, je dois vous informer que le contexte stocke deux propriétés de couleur, une pour le trait et une pour le remplissage. Pour notre visage souriant, nous devons définir le remplissage sur jaune et le pinceau sur noir.
context.fillStyle = 'yellow'; context.strokeStyle = 'black';
Après avoir défini la couleur requise pour le contexte, nous devons dessiner un cercle pour le visage. Malheureusement, il n'existe pas de méthode prédéfinie pour les cercles dans le contexte, nous devons donc utiliser ce qu'on appelle des chemins. Un chemin est simplement une série de lignes et de courbes connectées, et le chemin est fermé lorsque le dessin est terminé.
context.beginPath(); context.arc(320, 240, 200, 0, 2 * Math.PI); context.fill(); context.stroke(); context.closePath();
Expliqué de cette façon, nous utilisons le contexte pour commencer un nouveau chemin. Ensuite, nous créons un arc d'un rayon de 200 pixels au point (320, 240). Les deux derniers paramètres spécifient les angles initial et final à partir desquels construire l'arc, nous passons donc 0 et 2 *Math.PI pour créer un cercle complet. Enfin, nous utilisons le contexte pour remplir et dessiner le chemin en fonction de la couleur que nous avons définie.
Bien que fermer le chemin ne soit pas nécessaire pour que le script fonctionne, nous devons fermer le chemin afin de pouvoir commencer à dessiner les nouveaux yeux et la bouche du visage souriant. Les yeux peuvent être réalisés de la même manière, chaque œil aura besoin d'un rayon plus petit et d'une position différente. Mais nous devons d’abord nous rappeler de définir la couleur de remplissage sur 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();
Ce qui précède est tout le code pour les yeux. Maintenant, la bouche est très similaire, mais cette fois nous ne remplirons pas l'arc, notre angle sera configuré en demi-cercle. Pour ce faire, nous devons définir l'angle de départ sur zéro et l'angle de fin sur -1 * Math.PI. N'oubliez pas de définir la couleur du pinceau sur rouge.
context.fillStyle = 'red'; context.beginPath(); context.arc(320, 240, 150, 0, -1 * Math.PI); context.fill() context.stroke(); context.closePath();
Félicitations
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Comment dessiner des images à l'aide du canevas HTML5 js
Codes HTML5 et CSS3 pour l'affichage 3D du produit informations
HTML5 Canvas implémente le dessin d'une ligne fine de la largeur d'un pixel
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!