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!
H5: comment il améliore l'expérience utilisateur sur le WebApr 19, 2025 am 12:08 AMH5 améliore l'expérience utilisateur Web avec le support multimédia, le stockage hors ligne et l'optimisation des performances. 1) Support multimédia: H5 et les éléments simplifient le développement et améliorent l'expérience utilisateur. 2) Stockage hors ligne: WebStorage et indexDDB permettent une utilisation hors ligne pour améliorer l'expérience. 3) Optimisation des performances: les travailleurs Web et les éléments optimisent les performances pour réduire la consommation de bande passante.
Déconstruire le code H5: étiquettes, éléments et attributsApr 18, 2025 am 12:06 AMLe code HTML5 se compose d'étiquettes, d'éléments et d'attributs: 1. La balise définit le type de contenu et est entourée de supports d'angle, tels que. 2. Les éléments sont composés d'étiquettes de démarrage, de contenus et de balises d'extrémité, telles que le contenu. 3. Les attributs définissent les paires de valeurs clés dans la balise de démarrage, améliorent les fonctions, telles que. Ce sont les unités de base pour créer une structure Web.
Comprendre le code H5: les principes fondamentaux de HTML5Apr 17, 2025 am 12:08 AMHTML5 est une technologie clé pour créer des pages Web modernes, offrant de nombreux nouveaux éléments et fonctionnalités. 1. HTML5 introduit des éléments sémantiques tels que, etc., qui améliore la structure des pages Web et le référencement. 2. Prise en charge des éléments multimédias et des supports intégrés sans plug-ins. 3. Les formulaires améliorent les nouveaux types d'entrée et les propriétés de vérification, simplifiant le processus de vérification. 4. Offrez des fonctions de stockage hors ligne et locales pour améliorer les performances des pages Web et l'expérience utilisateur.
Code H5: meilleures pratiques pour les développeurs WebApr 16, 2025 am 12:14 AMLes meilleures pratiques pour le code H5 incluent: 1. Utilisez des déclarations de doctype correctes et l'encodage des caractères; 2. Utilisez des balises sémantiques; 3. Réduire les demandes HTTP; 4. Utiliser le chargement asynchrone; 5. Optimiser les images. Ces pratiques peuvent améliorer l'efficacité, la maintenabilité et l'expérience utilisateur des pages Web.
H5: L'évolution des normes et technologies WebApr 15, 2025 am 12:12 AMLes normes et technologies Web ont évolué à ce jour de HTML4, CSS2 et JavaScript simple et ont subi des développements importants. 1) HTML5 introduit des API telles que Canvas et WebStorage, ce qui améliore la complexité et l'interactivité des applications Web. 2) CSS3 ajoute des fonctions d'animation et de transition pour rendre la page plus efficace. 3) JavaScript améliore l'efficacité de développement et la lisibilité du code par la syntaxe moderne de Node.js et ES6, telles que les fonctions et classes Arrow. Ces changements ont favorisé le développement de l'optimisation des performances et les meilleures pratiques des applications Web.
H5 est-il un raccourci pour HTML5? Explorer les détailsApr 14, 2025 am 12:05 AMH5 n'est pas seulement l'abréviation de HTML5, il représente un écosystème de technologie de développement Web moderne plus large: 1. H5 comprend HTML5, CSS3, JavaScript et API et technologies connexes; 2. Il offre une expérience utilisateur plus riche, interactive et fluide et peut fonctionner de manière transparente sur plusieurs appareils; 3. À l'aide de la pile de technologie H5, vous pouvez créer des pages Web réactives et des fonctions interactives complexes.
H5 et HTML5: termes couramment utilisés dans le développement WebApr 13, 2025 am 12:01 AMH5 et HTML5 se réfèrent à la même chose, à savoir HTML5. HTML5 est la cinquième version de HTML, apportant de nouvelles fonctionnalités telles que les balises sémantiques, la prise en charge multimédia, la toile et les graphiques, le stockage hors ligne et le stockage local, l'amélioration de l'expressivité et de l'interactivité des pages Web.
À quoi se réfère H5? Explorer le contexteApr 12, 2025 am 12:03 AMH5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo
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
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.
Dreamweaver CS6
Outils de développement Web visuel
mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
