Code pour dessiner des visages souriants à l'aide de Canvas en HTML5
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 et , 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 <script>, qui spécifie le type de langage JavaScript et le chemin d'accès au fichier script.js. <br/>Manipulation du DOM</script>
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 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!
Comprendre l'audio et la vidéo HTML: Attributs et accessibilitéMay 16, 2025 am 12:05 AMHtml5AudioandvideoElementSenhanceFonctionnality and accessinghroughroughment spécificatTributes.1) the'Controls'AtTrributeadDSstandardPlayBackControls, tandis que la'aria-Label'ImprovessCreenReaderAccessibility.2)
Masterring Microdata: un guide étape par étape pour HTML5May 14, 2025 am 12:07 AMMicrodatainhtml5enhancesseseoandUseRexperiendByProvidingStructuredDatatOrSearchngines.1) useItemScope, itemType, andItempatTtTRributeStomarkupContentLike ProductSoreVants.2) testMicrodatawithToolslise-didStructuredDatateStingTool.3)
Quoi de neuf dans les formulaires HTML5? Explorer les nouveaux types d'entréeMay 13, 2025 pm 03:45 PMHTML5IntroducesNewInputTypesthatenhanceUseRexperience, SimplifyDevelopment, andImproveAccessability.1) ValidateSeMailFormat.2) optimise FormobilewithanumericKeyPad.3) et simplifyDatudDtimeIntits, réduisant les intérêts.
Comprendre H5: la signification et la significationMay 11, 2025 am 12:19 AMH5 est HTML5, la cinquième version de HTML. HTML5 améliore l'expressivité et l'interactivité des pages Web, introduit de nouvelles fonctionnalités telles que les balises sémantiques, le support multimédia, le stockage hors ligne et le dessin de toile, et favorise le développement de la technologie Web.
H5: Accessibilité et conformité des normes WebMay 10, 2025 am 12:21 AML'accessibilité et la conformité aux normes du réseau sont essentielles au site Web. 1) L'accessibilité garantit que tous les utilisateurs ont un accès égal au site Web, 2) les normes du réseau suivent pour améliorer l'accessibilité et la cohérence du site Web, 3) l'accessibilité nécessite l'utilisation de HTML sémantique, de navigation par clavier, de contraste des couleurs et de texte alternatif, 4) suivant ces principes n'est pas seulement une exigence morale et légale, mais également l'amplification de la base d'utilisateurs.
Quelle est la balise H5 dans HTML?May 09, 2025 am 12:11 AMLa balise H5 dans HTML est un titre de cinquième niveau qui est utilisé pour marquer des titres ou des sous-titres plus petits. 1) La balise H5 aide à affiner la hiérarchie du contenu et à améliorer la lisibilité et le référencement. 2) Combiné avec CSS, vous pouvez personnaliser le style pour améliorer l'effet visuel. 3) Utilisez raisonnablement les balises H5 pour éviter les abus et assurer la structure du contenu logique.
Code H5: Guide du débutant sur la structure WebMay 08, 2025 am 12:15 AMLes méthodes de création d'un site Web dans HTML5 incluent: 1. Utilisez des balises sémantiques pour définir la structure de la page Web, telle que, etc.; 2. Intégrer le contenu multimédia, l'utilisation et les balises; 3. Appliquer des fonctions avancées telles que la vérification du formulaire et le stockage local. Grâce à ces étapes, vous pouvez créer une page Web moderne avec une structure claire et des fonctionnalités riches.
Structure du code H5: organisation du contenu pour la lisibilitéMay 07, 2025 am 12:06 AMUne structure de code H5 raisonnable permet à la page de se démarquer parmi beaucoup de contenu. 1) Utilisez des étiquettes sémantiques telles que, etc. pour organiser le contenu pour rendre la structure claire. 2) Contrôlez l'effet de rendu des pages sur différents appareils via la disposition CSS tels que Flexbox ou Grid. 3) Implémentez la conception réactive pour s'assurer que la page s'adapte à différentes tailles d'écran.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
SublimeText3 Linux nouvelle version
Dernière version de SublimeText3 Linux
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel
Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.
