Code pour dessiner des visages souriants à l'aide de Canvas en HTML5-Tutoriel H5-php.cn

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

201557180008373.jpg (600×436) 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.

201557180130749.jpg (600×415)
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=&#39;canvas&#39; width=&#39;640&#39; height=&#39;480&#39;></canvas>
   <script type=&#39;text/javascript&#39; src=&#39;script.js&#39;></script>
</body></html>

Copier après la connexion

Pour l'expliquer de cette façon, j'utilise un ensemble de balises < html > et < body>, 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

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours