A quelques formes primitives peuvent être tirées directement sur le contexte graphique en javascript. Les formes les plus communes pour HTML5 et CSS3 programmation que la plupart des développeurs web utilisent sont des rectangles et texte.

Fonctions Rectangle

Vous pouvez dessiner trois types de rectangles différents:

• clearRect (x, y, w, h): Efface un rectangle avec le coin supérieur gauche (x, y) Et la taille (w, h). Généralement, l'effacement dessine dans la couleur de fond.

• fillRect (x, y, w, h): Dessine une boîte avec le coin supérieur gauche (x, y) Et la taille (w, h). Le rectangle est rempli avec le définie actuellement fillStyle.

• strokeRect (x, y, w, h): Dessine une boîte avec le coin supérieur gauche (x, y) Et la taille (w, h). La boîte est pas rempli, mais le contour est dessiné dans le défini actuellement strokeStyle et en utilisant le courant largeur de ligne.

  

Voici le code:

 fonction draw () {// à partir du dessin rectangle.htmlvar = document.getElementById ("dessin") - var con = drawing.getContext («2D») - con.fillStyle = "red" -con.strokeStyle = "green" - con.lineWidth -con.fillRect = "5" (10, 10, 180, 80) -con.strokeRect (10, 100, 180, 80) -} // fin tirage

Comment dessiner le texte

La tag a un support complet pour le texte. Vous pouvez ajouter du texte n'importe où sur la toile, en utilisant selon le style de police et la taille que vous souhaitez.

Texte est dessiné sur la toile un peu comme un rectangle. La première étape est de choisir la police désirée. Polices de toile sont créés par l'attribution d'une police au contexte de police attribuer. Les polices sont définis comme la mission de police unique chaîne en CSS. Vous pouvez spécifier toutes les caractéristiques de la police dans le même ordre que vous faites lorsque vous utilisez le raccourci de la police: le style, la variante, le poids, la taille et la famille.

Lorsque vous êtes prêt à afficher le texte réel sur l'écran, utilisez le fillText () Procédé, qui accepte trois paramètres. Le premier paramètre est le texte à afficher. Les deux derniers paramètres sont les positions x et y de la gauche; côté du texte. Le code suivant est utilisé pour produire le résultat. Lorsque le strokeStyle est pas explicitement définie, la course est noire par défaut.

 fonction draw () {// à partir du dessin de text.htmlvar = document.getElementById ("dessin") - var con = drawing.getContext («2D») - // clair backgroundcon.fillStyle = "blanc" -con.fillRect (0 , 0, 200, 200) - // Dessine police dans redcon.fillStyle = "red" -con.font = "20pt sans-serif" -con.fillText ("! Rocks Toile", 5, 100) -con.strokeText ("! Rocks Toile", 5, 130) -} // fin de tirage

Comment ajouter des ombres

Vous pouvez ajouter des ombres à tout ce que vous dessinez sur la toile. Les ombres sont assez facile à construire. Ils exigent un certain nombre de méthodes de l'objet de contexte:

• shadowOffsetX: Détermine combien l'ombre sera déplacée le long de l'axe X. Normalement, ce sera une valeur comprise entre 0 et 5. Une valeur positive déplace l'ombre vers la droite d'un objet. Changer cette valeur et la shadowOffsetY la valeur à modifier où la source de lumière semble être.

• shadowOffsetY: Détermine à quel point l'ombre se déplace le long de l'axe X. Une valeur positive déplace l'ombre sous l'objet. En général, toutes les ombres sur une page devraient avoir les mêmes décalages X et Y pour indiquer l'éclairage cohérent. La taille des valeurs de décalage implique à quelle hauteur l'élément est "élevé" de la page.

• shadowColor: La couleur de l'ombre indique la couleur de l'ombre. Normalement, elle est définie comme le noir, mais la couleur peut être changée à d'autres valeurs si vous le souhaitez.

• shadowBlur: La shadowBlur effet détermine combien l'ombre est adoucie. Si cette fonction est activée 0, l'ombre est extrêmement claire et nette. Une valeur de 5 conduit à une ombre beaucoup plus douce. Flou de l'ombre allège généralement la couleur d'ombre.

Si vous appliquez une ombre au texte, assurez-vous que le texte est toujours lisible. Grandes polices simples sont préférés, et vous pouvez avoir besoin d'ajuster la couleur d'ombre ou de flou pour assurer le texte principal est toujours lisible. Après que vous avez appliqué les caractéristiques de l'ombre, toutes les commandes de dessin ultérieures intégreront l'ombre. Si vous souhaitez activer les ombres, réglez le shadowColor à une couleur transparente utilisant RGBA.

Voici le code pour produire un texte avec une ombre:

 
Ombres
Toile pas supporté!