Notes d'étude du canevas : mise en œuvre des bases du canevas 2D

Auteur：Eve Cole Date de mise à jour：2025-02-11 14:12:02

1. Qu'est-ce que Canvas ?

<canvas> est un élément HTML qui peut être dessiné à l'aide de scripts (généralement js)

< canvas > WebKit a été introduit pour la première fois par Apple et utilisé dans Dashboard et Safari de Mac OS X

Aujourd'hui, tous les principaux navigateurs le prennent en charge (IE9+, les versions inférieures doivent introduire Explorer Canvas pour le prendre en charge)

1. Commencez à dessiner (contexte de rendu)

L'élément <canvas> crée un canevas de taille fixe sur lequel le contexte de rendu CanvasRenderContext2D peut être utilisé pour dessiner et traiter le contenu à afficher.

Pour dessiner sur un canevas, vous devez d'abord obtenir le contexte de rendu CanvasRenderContext2D2d. (Cela fait référence à la 2D, je ne parle pas de webgl)

 const canvas = document.getElementById('mycanvas'); const ctx = canvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);

Exemple

2. Propriétés de CanvasRenderContext2D :

Vous pouvez spécifier le style du dessin en définissant les propriétés du contexte.

Toutes les propriétés sont les suivantes :

propriété	Introduction
toile	élément de toile
Style de remplissage	La couleur, le mode ou le dégradé actuel utilisé pour remplir le chemin
fonte	Style de police
globalAlpha	Spécifie l'opacité du contenu dessiné sur le canevas
globalCompositeOperation	Spécifier comment une couleur est combinée avec des couleurs déjà présentes sur la toile (compositing)
Capuchon de ligne	Spécifie comment les extrémités de la ligne sont dessinées
ligneDashOffset	Définir le décalage du tiret
Rejoindre la ligne	Spécifiez comment deux lignes sont connectées
largeur de ligne	Spécifie la largeur de ligne pour les opérations de pinceau (dessin au trait).
mitreLimit	Lorsque l'attribut lineJoin est miter, cet attribut spécifie le rapport maximum entre la longueur de la jointure diagonale et la largeur de la ligne.
ombreFlou	Niveau d'effet de flou
couleurombre	couleur de l'ombre
ombreOffsetX	Distance de décalage horizontal de l'ombre
shadowOffsetY	Distance de décalage vertical de l'ombre
style de trait	Couleurs, modes et dégradés pour les chemins de pinceau (dessiner)
texteAligner	alignement du texte
texteBaseline	Alignement vertical du texte

3. Largeur et hauteur de la toile

La largeur et la hauteur du Canvas doivent être spécifiées à l'aide des valeurs d'attribut width et height.

Si non spécifié, la taille par défaut du canevas est de 300×150

La largeur et la hauteur spécifiées par le style correspondent uniquement à la taille d'affichage de l'élément canevas, et non à la taille de l'environnement de dessin.

 canevas {largeur : 1 000 px ; hauteur : 600 px ;}<canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /canvas>...ctx.fillStyle = rouge;ctx.fillRect(10, 10, 100, 100);

Exemple de largeur et de hauteur

Pourquoi les styles sont-ils définis sur la même taille mais affichés complètement différemment ?

Le canevas lui-même a deux ensembles de tailles : l’une est la taille de l’élément lui-même et l’autre est la taille de la surface de dessin.
S'il est défini via les attributs width et height, l'élément lui-même et la taille de la surface de dessin sont modifiés en même temps.
Si la taille de l'élément canevas ne correspond pas à la taille de la surface de dessin, la surface de dessin sera mise à l'échelle pour s'adapter à la taille de l'élément lui-même.
Il n'y a pas d'exigences particulières. Il est recommandé d'utiliser directement la largeur et la hauteur de la toile.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.