Comment dessiner sur votre page Web avec le tag HTML5

L'étiquette définit une partie de l'écran à utiliser comme canevas pour les graphiques contrôlés par programme. Le code JavaScript exécute tout le dessin et la manipulation de l'image. Le code suivant définit un élément canvas et fournit un bouton.

Cet exemple nécessite un support de canevas HTML5 cliquez sur moi pour voir un dessin

L'élément canevas fait peu de choses, vous devez utiliser JavaScript pour extraire un contexte de dessin (un élément spécial qui peut être dessiné) et utiliser les méthodes de cet objet de contexte pour créer des graphiques dynamiques. Par exemple, pour activer la fonction draw () lorsque l'utilisateur clique sur le bouton, utilisez ce code:

function dessine () {var myCanvas = document. getElementById ("myCanvas"); var context = myCanvas. getContext ("2d"); le contexte. fillStyle = "bleu"; le contexte. strokeStyle = "rouge"; cercle (contexte, 1, 1, 1); pour (i = 1; i <= 200; i + = 2) {cercle (contexte, i, i, i, "bleu"); cercle (contexte, 300-i, 200-i, i, "rouge"); cercle (contexte, 300-i, i, i, "bleu"); cercle (contexte, i, 200-i, i, "rouge");} // fin pour} // fin dessine la fonction cercle (contexte, x, y, rayon, couleur) {contexte. strokeStyle = couleur; le contexte. beginPath (); le contexte. arc (x, y, rayon, 0, Math. PI * 2, vrai); le contexte. stroke ();} // end circle

La sortie de ce code de dessin ressemble à ceci:

La plupart des navigateurs modernes supportent directement une forme de balise canvas. À l'heure actuelle, seul un contexte de dessin 2D est disponible, mais vous pourrez éventuellement créer des graphiques 3D directement dans le navigateur.

L'objet contexte contrôle toutes les fonctionnalités de dessin réelles. Quelques-unes des principales méthodes de l'objet de contexte incluent:

• arc () : Dessine un arc (portion de cercle) comme partie d'un chemin. L'arc est défini comme un cercle, avec un centre et un rayon, mais aussi avec des angles de début et de fin. Si les angles décrivent un cercle complet (0 à 2 fois pi radians), la commande d'arc dessine un cercle complet.

• beginPath () : Commence la définition d'un chemin. Normalement, un chemin est défini par une seule commande moveTo, suivie d'une série de commandes lineTo, et terminée par un trait, closePath ou fill.

• closePath () : Connecte le dernier point d'un chemin (dessiné avec les commandes moveTo et lineTo) au premier, créant une forme fermée qui peut être remplie.

• drawImage () : Vous permet de dessiner une image (à partir d'un fichier image externe) sur le canevas. De nombreuses implémentations permettent une manipulation au niveau des pixels, ce qui vous permet d'appliquer des filtres et des transformations personnalisés à vos images, ce qui permet un contrôle beaucoup plus important que la balise

  typique.

• fill () : Cette commande (et ses variantes, comme fillRect) vous permet d'appliquer le style de remplissage actuel aux éléments dessinés à l'écran.

• fillRect () : Construit un rectangle d'une taille et d'une position spécifiées, renseigné avec le style de remplissage actuel.

• fillStyle () : Vous permet de spécifier le style de remplissage. Cela peut être une valeur de couleur standard ou un dégradé prédéfini.

• lineTo () : Avec la commande moveTo, cela vous permet de créer un chemin à l'écran. La commande lineTo prend un point en entrée et tire d'un point précédemment défini vers le point courant. Notez que le chemin n'est pas affiché jusqu'à l'application de la fonction de trait.

• lineWidth () : Ceci définit la largeur de la ligne dessinée par une commande de course.

• moveTo : Utilisé dans la définition du chemin pour indiquer le point de départ d'un chemin.

• stroke () : Dessine le chemin actuellement défini. Notez que les chemins ne sont pas immédiatement dessinés; la commande stroke trace réellement le chemin sur l'écran.

• strokeRect () : Dessine un rectangle non rempli.

• strokeStyle () : Détermine le style du trait suivant à dessiner. La plupart des contextes de dessin prennent en charge les styles de trait en pointillés et en pointillés, mais d'autres sont attendus.

• text : Certaines implémentations de la balise canvas permettent la manipulation de texte. Ce support est inégal, mais il est susceptible de devenir commun dans les futures implémentations.

La balise canvas est l'une des nouveautés les plus importantes du HTML5, car elle permet un contrôle presque illimité de l'interface visuelle. Les développeurs de jeux ont commencé à créer des jeux en ligne en utilisant la toile, et ils sont déjà devenus la base de plusieurs expériences novatrices d'interface utilisateur (notamment Google Maps).