Tutoriel sur l'utilisation de Canvas en HTML5 pour dessiner un visage souriant_html5 astuces du didacticiel

Aujourd'hui, vous découvrirez une technologie Web appelée Canvas et son association avec le modèle objet de document (communément 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 aller plus loin avec JavaScript. 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 :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. ><corps>
3.  <toile id='toile' largeur='640' hauteur='480'>toile>
4.  <script type='text/ javascript' src='script.js'>script>
6. corps>html>

Pour expliquer, j'utilise un ensemble de balises < html > et <, afin que nous puissions 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

• Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes
• Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)
• Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9
• Expressions régulières et nouveaux éléments HTML5
• Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur