Créer une application de dessin avec HTML5 Canvas et JavaScript William Malone
par William Malone
- Comment dessiner dynamiquement sur toile HTML5
- Les futurs possiblités de toile HTML5
- La compatibilité du navigateur de toile HTML5
Chaque étape comprend une démonstration de travail; si vous voulez sauter avant:
Définir Notre objectif
De même, nous allons donner aussi notre utilisateur 4 tailles différentes pour dessiner avec, parce que nous pouvons. Pour récapituler notre application devrait comporter les éléments suivants:
Comme un livre de coloriage, nous allons donner à notre utilisateur quelque chose à « couleur ». J'ai choisi un de mes préférés: Canard pastèque par Rachel Cruthirds.
Préparer HTML5 Canvas: Scripting
Pour préparer notre toile, nous espérons utiliser:
Pour la compatibilité Internet Explorer, nous aurons aussi d'inclure un script supplémentaire: ExplorerCanvas.
Créer un dessin simple « toile »
Avant d'ajouter toutes les options, Abordons les bases du dessin dynamique sur une toile HTML5. Il sera composé de 4 événements de souris et deux fonctions: ajouterCliquer pour enregistrer des données de souris et redessiner qui attirera ces données.
Événement souris vers le bas: Lorsque l'utilisateur clique sur la toile, nous enregistrons la position dans un tableau via la fonction ajouterCliquer. Nous avons mis la peinture booléenne true (nous verrons pourquoi dans une seconde). Enfin, nous mettons à jour la toile avec la redessiner la fonction.
Voici la fonction ajouterCliquer qui sauvera la position de clic:
La fonction de redessiner est où la magie se produit. Chaque fois que la fonction est appelée la toile est effacée et tout est redessinée. Nous pourrions être plus efficace et redessiner que certains aspects qui ont été modifiés, mais nous allons rester simple.
Simple Dessin Canvas Demo
Effacer la toile: Effacer
Ajouter des couleurs
Étant donné que la couleur peut varier maintenant, nous avons besoin de mettre à jour la fonction de redessiner il fait référence à la couleur qui était active lorsque l'utilisateur a cliqué. Nous passons la ligne à propos strokeStyle dans la boucle et lui attribuer la valeur de couleur dans la nouvelle clickColor de tableau qui correspond à la clickage de l'utilisateur.
Couleurs de démonstration
Essayez avec choix de couleurs:
- Effacer la toile: Effacer
- Choisissez une couleur: Violet Vert Marron Jaune
Tout comme nous avons ajouté des couleurs, ajoutons quelques tailles au choix: « petit », « normale », « grand » et « énorme ».
Nous avons besoin d'un ou deux autres variables globales: clickSize et curSize.
Mettre à jour la fonction de redessiner pour gérer les nouvelles tailles.
Demo Tailles
Essayez avec différentes tailles:
- Effacer la toile: Effacer
- Choisissez une couleur: Violet Vert Marron Jaune
- Choisissez une taille: Petit Normal Grand Énorme
Les deux variables globales dont nous avons besoin sont: clickTool et curTool.
Mettre à jour la fonction de redessiner pour gérer les nouveaux outils.
Outils de démonstration
Essayez avec différents outils:
Ajouter Outline
livres à colorier donnent un aperçu de quelque chose à la couleur: un chiot mignon ou un lapin saut. J'ai choisi un canard de melon d'eau.
Charger l'image de contour.
Mettre à jour la fonction de redessiner pour dessiner l'image de contour en utilisant la méthode drawImage du contexte de la toile. Ses paramètres sont l'objet d'image, nous avons chargé, la position que nous voulons dessiner l'image, et les dimensions de l'image.
Outline Demo
Détails finales
Nous y sommes presque! Ces dernières informations sont facultatives: limiter la zone de dessin à un rectangle sur la toile et utiliser le reste de la toile pour notre IUG (aka boutons).
Faisons masque la toile de sorte que tous le dessin est dans un la zone de dessin. Nous utilisons la méthode de clip avec les méthodes sauvegarde et de restauration. Cette méthode est actuellement prise en charge par Internet Explorer.
Démo complète
Maintenant que nous avons créé une application de dessin de toile HTML5, permet de prendre une pause et d'en tirer!
Télécharger le code source
Exemples en action
Si vous avez construit quelque chose en utilisant cet article et que vous voulez partager, s'il vous plaît laissez-moi savoir. Il y a beaucoup de grandes applications là-bas, y compris: