Comment dessiner des rectangles et le texte avec la toile de html5

category Internet & médias sociaux / Web design & développement / Pages web construction

Quelques formes primitives peuvent être tirées directement sur le contexte graphique de la toile

Sommaire

élément de HTML5. Les formes les plus courantes sont des rectangles et du texte, qui peuvent aussi avoir des ombres. Voici comment vous créez deux.

Dessin de rectangles de toile HTML5

Vous pouvez dessiner trois types de rectangles différents, comme indiqué dans la figure:

  • 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 dessiner 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 l'heure actuelle définie 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.

    image0.jpg

Voici le code qui génère la figure:

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

Dessin de texte avec la toile HTML5

La toile 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 voulez, comme le montre cette illustration d'une toile avec le texte intégré:

image1.jpg

La première étape dans l'élaboration du texte est de choisir la police. 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 () méthode, qui accepte trois paramètres: le texte à afficher et les positions X et Y de la gauche; côté du texte. Le code suivant produit les résultats dans la figure:

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

A propos Auteur
Fonctions de dessin de HTML5 canvas Fonctions de dessin de HTML5 canvas

Fonctions javascript sont utilisés pour manipuler les pixels sur les zones HTML5 toile en fonction des paramètres d'attributs et paramètres de la fonction. Référence Fonctions un contexte en utilisant la notation de la syntaxe à point.…

Contexte de HTML5 canvas attributs Contexte de HTML5 canvas attributs

Chaque contexte HTML5 Canvas contient des attributs qui peuvent être modifiés par le code javascript. Notez que les attributs sont affectés à la toile contextes, pas des objets de toile individuels. Attributs d'un contexte sont…

Comment construire un motif sur la toile de javascript pour HTML5 et CSS3 programmation Comment construire un motif sur la toile de javascript pour HTML5 et CSS3 programmation

Un motif est utilisé en javascript pour définir une image pour être utilisé comme un remplissage ou un AVC. Vous pouvez utiliser une image sur votre page HTML5 comme un modèle, mais il est généralement préférable de trouver ou de…

Comment dessiner des images sur la toile de javascript pour HTML5 et CSS3 programmation Comment dessiner des images sur la toile de javascript pour HTML5 et CSS3 programmation

Bien que HTML a longtemps eu un soutien pour les images, l'interface de toile de javascript ajoute une nouvelle vie à des images web. Les images peuvent être affichés à l'intérieur d'une toile, où ils peuvent être intégrés avec les…

Comment dessiner des formes sur la toile de javascript pour HTML5 et CSS3 programmation Comment dessiner des formes sur la toile de javascript pour HTML5 et CSS3 programmation

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…

Comment faire pour déplacer un élément sur la toile de javascript pour HTML5 et CSS3 programmation Comment faire pour déplacer un élément sur la toile de javascript pour HTML5 et CSS3 programmation

Souvent, vous préférez déplacer un élément sur la toile de javascript. Ce procédé est en fait très semblable au mécanisme de rotation pour la programmation HTML5. Voici un code qui se déplace une image et l'enveloppe de l'autre côté…

Comment mettre en place les toiles javascript pour HTML5 et CSS3 programmation Comment mettre en place les toiles javascript pour HTML5 et CSS3 programmation

Pour utiliser le tag en javascript, construire une page web HTML5 et CSS3 avec un élément dans ce commencer. Typiquement vous fournissez largeur, hauteur, et id parameters: Votre navigateur ne supporte pas la balise canvas ...À…

Comment dessiner avec pygame sur votre Raspberry Pi Comment dessiner avec pygame sur votre Raspberry Pi

Dessin sur l'écran Raspberry Pi comporte deux étapes. La première est que vous dessinez sur la toile (ou un objet de surface), et la seconde est que vous mettez à jour l'écran avec ces changements. Pour que la fenêtre fond blanc,…

Dessinez un rectangle de base avec la balise canvas HTML5 Dessinez un rectangle de base avec la balise canvas HTML5

Pour utiliser le toile tag disponible en HTML5, construire une page Web avec un toile élément en elle. Typiquement, vous fournissez largeur, hauteur, et id paramètres pour indiquer la taille de la cnavas est, comme ceci:Votre navigateur ne…

Comment créer une animation avec la balise canvas HTML5 Comment créer une animation avec la balise canvas HTML5

Bien que le HTML5 toile tag pourrait ne pas remplacer Flash comme un mécanisme pour la mise en œuvre des jeux et des animations dans le navigateur, il est relativement facile d'ajouter une animation à un toile image. La clé est d'utiliser les…

Comment inclure des images sur votre page web avec toile HTML5 Comment inclure des images sur votre page web avec toile HTML5

Alors que HTML a longtemps eu un soutien pour les images, les toile interface HTML5 ajoute une nouvelle vie à des images sur le Web. Les images peuvent être affichés à l'intérieur d'une toile, où ils peuvent être intégrés avec les…

Comment manipuler les pixels avec la balise canvas HTML5 Comment manipuler les pixels avec la balise canvas HTML5

Avec HTML5, vous pouvez extraire les données d'un toile marquer dans les données de pixels sous-jacents. Manipulation de ces données, vous offre un grand contrôle de votre image en temps réel. Vous pouvez utiliser ces données pour…

Comment utiliser un modèle comme un remplissage ou un AVC avec la balise canvas HTML5 Comment utiliser un modèle comme un remplissage ou un AVC avec la balise canvas HTML5

Presque chaque opération en HTML5 de toile fonction implémente un style de remplissage ou d'un AVC. Pour tirer le meilleur parti de la toile, vous avez besoin de comprendre comment ils fonctionnent. Les trois principaux types de styles que vous…

HTML5 canvas pour les nuls HTML5 canvas pour les nuls

Applications HTML5 Canvas communiquent avec le navigateur d'accueil pour les rappels d'animation, la lecture audio / vidéo, et la gestion des événements de l'utilisateur. Cela fournit un canal bidirectionnel entre le code javascript et le…

» » » » Comment dessiner des rectangles et le texte avec la toile de html5