Context2D QML Type

Fournit un contexte 2D pour les formes d'un élément Canvas. En savoir plus...

• Liste de tous les membres, y compris les membres hérités

Propriétés

• canvas : QtQuick::Canvas
• fillRule : enumeration
• fillStyle : variant
• font : string
• globalAlpha : real
• globalCompositeOperation : string
• lineCap : string
• lineDashOffset : real (since QtQuick 2.11)
• lineJoin : string
• lineWidth : real
• miterLimit : real
• shadowBlur : real
• shadowColor : string
• shadowOffsetX : real
• shadowOffsetY : real
• strokeStyle : variant
• textAlign : string
• textBaseline : string

Méthodes

• Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• Context2D arcTo(real x1, real y1, real x2, real y2, real radius)
• Context2D beginPath()
• Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• Context2D clearRect(real x, real y, real w, real h)
• Context2D clip()
• Context2D closePath()
• CanvasGradient createConicalGradient(real x, real y, real angle)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(real sw, real sh)
• CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)
• variant createPattern(Image image, string repetition)
• variant createPattern(color color, enumeration patternMode)
• CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• void drawImage(variant image, real dx, real dy)
• void drawImage(variant image, real dx, real dy, real dw, real dh)
• void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)
• Context2D ellipse(real x, real y, real w, real h)
• Context2D fill()
• Context2D fillRect(real x, real y, real w, real h)
• Context2D fillText(text, x, y)
• CanvasImageData getImageData(real x, real y, real w, real h)
• array getLineDash() (since QtQuick 2.11)
• bool isPointInPath(real x, real y)
• Context2D lineTo(real x, real y)
• var measureText(text)
• Context2D moveTo(real x, real y)
• void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)
• Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)
• Context2D rect(real x, real y, real w, real h)
• Context2D reset()
• Context2D resetTransform()
• Context2D restore()
• Context2D rotate(real angle)
• Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)
• Context2D save()
• Context2D scale(real x, real y)
• void setLineDash(array pattern) (since QtQuick 2.11)
• Context2D setTransform(real a, real b, real c, real d, real e, real f)
• Context2D shear(real sh, real sv)
• Context2D stroke()
• Context2D strokeRect(real x, real y, real w, real h)
• Context2D strokeText(text, x, y)
• Context2D text(string text, real x, real y)
• Context2D transform(real a, real b, real c, real d, real e, real f)
• Context2D translate(real x, real y)

Description détaillée

L'objet Context2D peut être créé à l'aide de la méthode getContext() d'un élément d'Canvas:

Canvas {
  id:canvas
  onPaint:{
     var ctx = canvas.getContext('2d');
     //...
  }
}

L'API Context2D implémente la norme W3C Canvas 2D Context API, avec quelques fonctionnalités améliorées.

L’API Context2D fournit le contexte de rendu qui définit les méthodes et les attributs nécessaires pour dessiner sur l’élément ` Canvas `. Le code suivant attribue le contexte de rendu `canvas` à une variable ` context ` :

var context = mycanvas.getContext("2d")

L’API Context2D représente le canevas sous la forme d’un système de coordonnées dont l’origine (0,0) se trouve dans le coin supérieur gauche, comme illustré dans la figure ci-dessous. Les coordonnées augmentent le long de l’axe x de gauche à droite et le long de l’axe y de haut en bas du canevas.

Documentation des propriétés

canvas : QtQuick::Canvas

Contient l'élément « canvas » sur lequel le contexte effectue le dessin.

Cette propriété est en lecture seule.

fillRule : enumeration

Contient la règle de remplissage actuellement utilisée pour remplir les formes. Les règles de remplissage suivantes sont prises en charge :

Voir également fillStyle.

fillStyle : variant

Stocke le style actuellement utilisé pour le remplissage des formes. Le style peut être soit une chaîne de caractères contenant une couleur CSS, soit un objet « CanvasGradient » ou « CanvasPattern ». Les valeurs non valides sont ignorées. Cette propriété accepte plusieurs syntaxes de couleur :

• 'rgb(rouge, vert, bleu)' – par exemple : 'rgb(255, 100, 55)' ou 'rgb(100%, 70%, 30%)'
• 'rgba(rouge, vert, bleu, alpha)' – par exemple : 'rgb(255, 100, 55, 1,0)' ou 'rgb(100 %, 70 %, 30 %, 0,5)'
• « hsl(teinte, saturation, luminosité) »
• « hsla(teinte, saturation, luminosité, alpha) »
• '#RRGGBB' - par exemple : '#00FFCC'
• Qt.rgba(rouge, vert, bleu, alpha) – par exemple : Qt.rgba(0,3, 0,7, 1, 1,0)

Si l'fillStyle e ou l'strokeStyle est attribué plusieurs fois dans une boucle, il convient de choisir la dernière syntaxe Qt.rgba(), car elle offre les meilleures performances : il s'agit déjà d'une valeur QColor valide qui n'a pas besoin d'être analysée à chaque fois.

La valeur par défaut est « #000000 ».

Voir également createLinearGradient(), createRadialGradient(), createPattern() et strokeStyle.

font : string

Enregistre les paramètres de police actuels.

Un sous-ensemble de la norme W3C relative au contexte 2D pour les polices est pris en charge :

• font-style (facultatif) : normal | italic | oblique
• font-variant (facultatif) : normal | petites capitales
• font-weight (facultatif) : normal | bold | 1 ... 1000
• font-size : Npx | Npt (où N est un nombre positif)
• font-family : voir http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

La valeur par défaut de la police est « 10px sans-serif ».

globalAlpha : real

Contient la valeur alpha actuellement appliquée aux opérations de rendu. Cette valeur doit être comprise entre 0.0 (entièrement transparent) et 1.0 (entièrement opaque). La valeur par défaut est 1.0.

globalCompositeOperation : string

Conserve l'opération de composition en cours. Les opérations autorisées sont les suivantes :

Conformément à la norme W3C, les modes de composition étendus, au-delà des modes obligatoires, sont fournis selon la syntaxe « nom du fournisseur-nom de l'opération », par exemple : QPainter::CompositionMode_Exclusion est fourni sous le nom « qt-exclusion ».

lineCap : string

Contient le style actuel d'extrémité de ligne. Les styles d'extrémité de ligne possibles sont les suivants :

Les autres valeurs sont ignorées.

lineDashOffset : real [since QtQuick 2.11]

Contient le décalage actuel des tirets de ligne. La valeur par défaut du décalage des tirets de ligne est 0.

Cette propriété a été introduite dans QtQuick 2.11.

Voir également getLineDash() et setLineDash().

lineJoin : string

Contient le style de jonction de lignes actuel. Une jonction existe à n'importe quel point d'un sous-chemin partagé par deux lignes consécutives. Lorsqu'un sous-chemin est fermé, une jonction existe également à son premier point (équivalent à son dernier point), reliant la première et la dernière ligne du sous-chemin.

Les styles de jonction de lignes possibles sont les suivants :

Les autres valeurs sont ignorées.

lineWidth : real

Contient la largeur actuelle de la ligne. Les valeurs qui ne sont pas des nombres finis supérieurs à zéro sont ignorées.

miterLimit : real

Enregistre le rapport limite actuel de l'onglet. La valeur par défaut de la limite d'onglet est 10,0.

shadowBlur : real

Contient le niveau actuel de flou appliqué aux ombres

shadowColor : string

Contient la couleur actuelle de l'ombre.

shadowOffsetX : real

Contient le décalage actuel de l'ombre en distance horizontale positive.

Voir également shadowOffsetY.

shadowOffsetY : real

Contient le décalage actuel de l'ombre en distance verticale positive.

Voir également shadowOffsetX.

strokeStyle : variant

Contient la couleur ou le style actuel à utiliser pour les lignes entourant les formes. Le style peut être soit une chaîne de caractères contenant une couleur CSS, soit un objet ` CanvasGradient ` ou `CanvasPattern`. Les valeurs non valides sont ignorées.

La valeur par défaut est « #000000 ».

Voir également createLinearGradient(), createRadialGradient(), createPattern() et fillStyle.

textAlign : string

Contient les paramètres d'alignement du texte actuels. Les valeurs possibles sont les suivantes :

Les autres valeurs sont ignorées.

textBaseline : string

Contient les paramètres d'alignement de base actuels. Les valeurs possibles sont les suivantes :

Les autres valeurs sont ignorées. La valeur par défaut est « alphabétique ».

Documentation de la méthode

Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

Ajoute un arc au sous-trajet actuel, situé sur la circonférence du cercle dont le centre se trouve au point (x, y) et dont le rayon est radius.

Les coordonnées startAngle et endAngle sont toutes deux mesurées à partir de l’axe des x, en radians.

Le paramètre « anticlockwise » est égal à « false » pour chaque arc de la figure ci-dessus, car ils sont tous tracés dans le sens des aiguilles d’une montre.

Voir également arcTo et la norme W3C sur le contexte 2D pour la fonction arc().

Context2D arcTo(real x1, real y1, real x2, real y2, real radius)

Ajoute un arc, avec les points de contrôle et le rayon indiqués, au sous-trajet actuel, relié au point précédent par une ligne droite. Pour tracer un arc, commencez par suivre les mêmes étapes que pour créer une ligne :

• Appelez la méthode ` beginPath()` pour définir un nouveau tracé.
• Appelez la méthode ` moveTo(x, y)` pour définir votre position de départ sur le canevas au point `(x, y)`.
• Pour dessiner un arc ou un cercle, appelez la méthode arcTo(x1, y1, x2, y2, radius). Cela ajoute un arc dont le point de départ (x1, y1) et le point d'arrivée (x2, y2) sont définis par radius au sous-trajet actuel, et le relie au sous-trajet précédent par une ligne droite.

Voir également arc et la norme 2D Context du W3C concernant la fonction arcTo().

Context2D beginPath()

Réinitialise le chemin d'accès actuel pour lui attribuer un nouveau chemin.

Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

Ajoute une courbe de Bézier cubique entre la position actuelle et le point d'extrémité donné, en utilisant les points de contrôle spécifiés par (cp1x, cp1y) et (cp2x, cp2y). Une fois la courbe ajoutée, la position actuelle est mise à jour pour se situer au point d'extrémité (x, y) de la courbe. Le code suivant génère le tracé illustré ci-dessous :

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 0);//start point
ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
ctx.stroke();

Voir également la norme W3C relativeau contexte 2D pour la fonction `bezierCurveTo` et la superbe démo « The beautiful flower » utilisant la fonction `bezierCurveTo`.

Context2D clearRect(real x, real y, real w, real h)

Efface tous les pixels du canevas situés dans le rectangle défini par (x, y, w, h) et les remplace par du noir transparent.

Context2D clip()

Crée la zone de détourage à partir du tracé actuel. Les parties de la forme situées en dehors du tracé de détourage ne sont pas affichées. Pour créer une forme complexe à l'aide de la méthode clip():

1. Appelez la méthode ` context.beginPath() ` pour définir le tracé de détourage.
2. Définissez le tracé de détourage en appelant n'importe quelle combinaison des méthodes lineTo, arcTo, arc, moveTo, etc. et closePath.
3. Appelez la méthode context.clip().

La nouvelle forme s'affiche. L'exemple suivant montre comment un tracé de détourage peut modifier l'affichage d'une image :

Voir également beginPath(), closePath(), stroke(), fill() et la norme W3C 2D Context relative au découpage.

Context2D closePath()

Ferme le sous-trajet actuel en traçant une ligne jusqu'au début de celui-ci, ce qui lance automatiquement un nouveau trajet. Le point actuel du nouveau trajet correspond au premier point du sous-trajet précédent.

Voir également la norme W3C relativeau contexte 2D pour la propriété closePath.

CanvasGradient createConicalGradient(real x, real y, real angle)

Renvoie un objet ` CanvasGradient ` représentant un dégradé conique qui interpole les couleurs dans le sens antihoraire autour d'un point central (x, y) avec un angle de départ angle exprimé en radians.

Voir également CanvasGradient::addColorStop(), createLinearGradient(), createRadialGradient(), createPattern(), fillStyle et strokeStyle.

CanvasImageData createImageData(CanvasImageData imageData)

Crée un objet ` CanvasImageData ` ayant les mêmes dimensions que l'argument ` imageData `.

CanvasImageData createImageData(Url imageUrl)

Crée un objet ` CanvasImageData ` avec l'image indiquée, chargée depuis imageUrl.

Voir également Canvas::loadImage(), QtQuick::Canvas::unloadImage() et QtQuick::Canvas::isImageLoaded.

CanvasImageData createImageData(real sw, real sh)

Crée un objet ` CanvasImageData ` avec les dimensions indiquées (sw, sh).

CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)

Renvoie un objet ` CanvasGradient ` représentant un dégradé linéaire qui effectue une transition de couleur le long d'une ligne entre le point de départ (x0, y0) et le point d'arrivée (x1, y1).

Un dégradé est une transition progressive entre des couleurs. Il existe deux types de dégradés : linéaires et radiaux. Les dégradés doivent comporter au moins deux arrêts de couleur, représentant des changements de couleur positionnés entre 0 et 1, entre les points de départ et d'arrivée du dégradé ou les cercles.

Voir également CanvasGradient::addColorStop(), createRadialGradient(), createConicalGradient(), createPattern(), fillStyle et strokeStyle.

variant createPattern(Image image, string repetition)

Renvoie un objet `CanvasPattern` qui utilise l'image fournie et la répète dans la ou les directions indiquées par l'argument `repetition`.

Le paramètre ` image ` doit être un élément `Image` valide, un objet ` CanvasImageData ` valide ou l'URL d'une image chargée. En l'absence de données d'image, cette fonction lève une exception `INVALID_STATE_ERR`.

Les valeurs autorisées pour repetition sont les suivantes :

Si l'argument de répétition est vide ou nul, la valeur « repeat » est utilisée.

Voir également strokeStyle et fillStyle.

variant createPattern(color color, enumeration patternMode)

Il s'agit d'une fonction surchargée. Elle renvoie un objet `CanvasPattern` qui utilise les paramètres ` color ` et ` patternMode` fournis. Les modes de motif valides sont les suivants :

Voir également Qt::BrushStyle.

CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)

Renvoie un objet ` CanvasGradient ` représentant un dégradé radial qui s'étend le long du cône défini par le cercle de départ, dont l'origine est (x0, y0) et le rayon r0, et le cercle de fin, dont l'origine est (x1, y1) et le rayon r1.

Voir également CanvasGradient::addColorStop(), createLinearGradient(), createConicalGradient(), createPattern(), fillStyle et strokeStyle.

void drawImage(variant image, real dx, real dy)

Dessine l'image fournie sur le canevas à la position (dx, dy). Remarque : le type « image » peut être un élément « Image », une URL d'image ou un objet « CanvasImageData ». Lorsqu'il s'agit d'un élément « Image », si l'image n'est pas entièrement chargée, cette méthode ne dessine rien. Lorsqu’elle est fournie sous forme de chaîne URL, l’image doit être chargée au préalable en appelant la méthode ` Canvas::loadImage()` de l’élément `Canvas`. L’image dessinée est soumise au chemin de découpe du contexte actuel, même si l’ image fournie est un objet ` CanvasImageData `.

Voir également CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded et la norme W3C 2D Context relative à la méthode `drawImage`.

void drawImage(variant image, real dx, real dy, real dw, real dh)

Il s'agit d'une fonction surchargée. Elle dessine l'élément donné sous la forme d'image sur le canevas, au point (dx, dy) et avec une largeur de dw et une hauteur de dh.

Remarque : le type « image » peut être un élément Image, une URL d’image ou un objet « CanvasImageData ». Lorsqu’il s’agit d’un élément Image, si l’image n’est pas entièrement chargée, cette méthode ne dessine rien. Lorsqu’elle est fournie sous forme de chaîne URL, l’image doit être chargée au préalable en appelant la méthode ` Canvas::loadImage()` de l’élément `Canvas`. L’image dessinée est soumise au chemin de découpe du contexte actuel, même si l’ image fournie est un objet ` CanvasImageData `.

Voir également CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded et la norme W3C 2D Context relative à drawImage.

void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)

Il s'agit d'une fonction surchargée. Elle dessine l'élément fourni en tant qu'objet « image » à partir du point de source (sx, sy), de la largeur de source sw et de la hauteur de source sh, sur le canevas au point (dx, dy), avec une largeur de dw et une hauteur de dh.

Remarque : le type « image » peut être un élément « Image » ou « Canvas », une URL d’image ou un objet « CanvasImageData ». Lorsqu’il s’agit d’un élément « Image », si l’image n’est pas entièrement chargée, cette méthode ne dessine rien. Lorsqu’elle est fournie sous forme de chaîne URL, l’image doit être chargée au préalable en appelant la méthode ` Canvas::loadImage()` de l’élément `Canvas`. L’image dessinée est soumise au chemin de découpe du contexte actuel, même si l’ image fournie est un objet ` CanvasImageData `.

Voir également CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded et la norme W3C 2D Context pour drawImage.

Context2D ellipse(real x, real y, real w, real h)

Crée une ellipse à l'intérieur du rectangle de délimitation défini par son coin supérieur gauche situé en (x, y), sa largeur w et sa hauteur h, puis l'ajoute au tracé en tant que sous-tracé fermé.

L'ellipse est constituée d'une courbe dans le sens des aiguilles d'une montre, commençant et se terminant à zéro degré (position 3 heures).

Context2D fill()

Remplit les sous-chemins avec le style de remplissage actuel.

Voir également la norme W3C relativeau contexte 2D pour le remplissage et fillStyle.

Context2D fillRect(real x, real y, real w, real h)

Peint une zone rectangulaire définie par (x, y, w, h) à l'aide de fillStyle.

Voir également fillStyle.

Context2D fillText(text, x, y)

Remplit l'text spécifiée à la position indiquée (x, y).

Voir également font, textAlign, textBaseline et strokeText.

CanvasImageData getImageData(real x, real y, real w, real h)

Renvoie un objet ` CanvasImageData ` contenant les données d'image correspondant au rectangle du canevas spécifié par (x, y, w, h).

[since QtQuick 2.11] array getLineDash()

Renvoie un tableau de qreals représentant le motif de tirets de la ligne.

Cette méthode a été introduite dans QtQuick 2.11.

Voir également setLineDash() et lineDashOffset.

bool isPointInPath(real x, real y)

Renvoie « true » si le point (x, y) se trouve sur le chemin actuel.

Voir également la norme W3C relativeau contexte 2D pour la méthode isPointInPath.

Context2D lineTo(real x, real y)

Trace une ligne entre la position actuelle et le point situé aux coordonnées (x, y).

var measureText(text)

Renvoie un objet doté d'une propriété « width », dont la valeur correspond à l'appel de la fonction « QFontMetrics::horizontalAdvance() » avec l'text fournie, dans la police actuelle.

Context2D moveTo(real x, real y)

Crée un nouveau sous-chemin dont un point se trouve à (x, y).

void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)

Affiche les données de l'objet ` imageData ` donné sur le canevas aux coordonnées (dx, dy).

Si un rectangle à actualiser (dirtyX, dirtyY, dirtyWidth, dirtyHeight) est fourni, seuls les pixels de ce rectangle sont dessinés.

Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)

Ajoute une courbe de Bézier quadratique entre le point actuel et le point d'arrivée (x, y) avec le point de contrôle spécifié par (cpx, cpy).

Voir également la norme W3C relativeau contexte 2D pour la fonction `quadraticCurveTo`.

Context2D rect(real x, real y, real w, real h)

Ajoute un rectangle à la position (x, y), avec la largeur w et la hauteur h spécifiées, sous la forme d'un sous-tracé fermé.

Context2D reset()

Réinitialise l'état et les propriétés du contexte à leurs valeurs par défaut.

Context2D resetTransform()

Réinitialise la matrice de transformation à sa valeur par défaut (ce qui équivaut à appeler ` setTransform` (1, 0, 0, 1, 0, 0)).

Voir également transform(), setTransform() et reset().

Context2D restore()

Retire l'état situé au sommet de la pile et rétablit le contexte correspondant à cet état.

Voir également save().

Context2D rotate(real angle)

Faites pivoter le canevas autour de l'origine actuelle d'angle, en radians et dans le sens des aiguilles d'une montre.

ctx.rotate(Math.PI/2);

La matrice de transformation de rotation est la suivante :

où l'angle de rotation est exprimée en radians.

Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

Ajoute au tracé un rectangle aux coins arrondis, défini par (x, y, w, h). Les arguments xRadius et yRadius indiquent le rayon des ellipses définissant les coins du rectangle arrondi.

Context2D save()

Ajoute l'état actuel à la pile d'états.

Avant de modifier des attributs d’état, vous devez enregistrer l’état actuel pour pouvoir vous y référer ultérieurement. Le contexte gère une pile d’états de dessin. Chaque état se compose de la matrice de transformation actuelle, de la zone de découpe et des valeurs des attributs suivants :

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• font
• textAlign
• textBaseline

Le tracé actuel ne fait PAS partie de l’état de dessin. Le tracé peut être réinitialisé en appelant la méthode ` beginPath()`.

Context2D scale(real x, real y)

Augmente ou réduit la taille de chaque unité de la grille du canevas en multipliant la matrice de transformation actuelle par les facteurs d'échelle. x correspond au facteur d'échelle dans le sens horizontal et y au facteur d'échelle dans le sens vertical.

Le code suivant double la taille horizontale d'un objet dessiné sur le canevas et divise par deux sa taille verticale :

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] void setLineDash(array pattern)

Définit le motif de tirets selon le motif indiqué.

pattern une liste de nombres spécifiant les distances à respecter pour tracer alternativement une ligne et un espace.

Si le nombre d'éléments du tableau est impair, les éléments du tableau sont copiés et concaténés. Par exemple, [5, 15, 25] deviendra [5, 15, 25, 5, 15, 25].

var space = 4 ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space]) ... ctx.stroke();

Cette méthode a été introduite dans QtQuick 2.11.

Voir également getLineDash() et lineDashOffset.

Context2D setTransform(real a, real b, real c, real d, real e, real f)

Modifie la matrice de transformation pour lui attribuer la matrice indiquée par les arguments, comme décrit ci-dessous.

La modification directe de la matrice de transformation vous permet d'effectuer des transformations de mise à l'échelle, de rotation et de translation en une seule étape.

Chaque point du canevas est multiplié par la matrice avant tout tracé. La spécification HTML Canvas 2D Context définit la matrice de transformation comme suit :

où :

• a est le facteur d’échelle dans la direction horizontale (x)

  

• c est le facteur d'inclinaison dans la direction x

  

• e est la translation dans la direction x

  

• b est le facteur d'inclinaison dans la direction y (verticale)

  

• d est le facteur d'échelle dans la direction y

  

• f est la translation dans la direction y

  

• la dernière ligne reste constante

Les facteurs d'échelle et les facteurs d'inclinaison sont des multiples ; e et f sont des unités de l'espace de coordonnées, tout comme les unités de la méthode translate(x,y).

Voir également transform().

Context2D shear(real sh, real sv)

Découpe la matrice de transformation selon sh dans le sens horizontal et sv dans le sens vertical.

Context2D stroke()

Trace les sous-trajets avec le style de trait actuel.

Voir également strokeStyle et la norme W3C relative au contexte 2D pour le trait.

Context2D strokeRect(real x, real y, real w, real h)

Trace le contour du rectangle défini par (x, y, w, h) en utilisant les attributs strokeStyle, lineWidth, lineJoin et (le cas échéant) miterLimit.

Voir également strokeStyle, lineWidth, lineJoin et miterLimit.

Context2D strokeText(text, x, y)

Affiche l'text fournie à l'emplacement spécifié par (x, y).

Voir également font, textAlign, textBaseline et fillText.

Context2D text(string text, real x, real y)

Ajoute l’ text on fournie au chemin sous la forme d’un ensemble de sous-chemins fermés créés à partir de la police du contexte actuel fournie.

Les sous-chemins sont positionnés de telle sorte que l'extrémité gauche de la ligne de base du texte se trouve au point spécifié par (x, y).

Context2D transform(real a, real b, real c, real d, real e, real f)

Cette méthode est très similaire à setTransform(), mais au lieu de remplacer l'ancienne matrice de transformation, elle applique la matrice de transformation fournie à la matrice actuelle en la multipliant par celle-ci.

La méthode ` setTransform` (`a`, ` b`, ` c`, ` d`, ` e`, ` f`) réinitialise en fait la transformation actuelle à la matrice identité, puis appelle la méthode `transform` (`a`, ` b`, ` c`, ` d`, ` e`, ` f`) avec les mêmes arguments.

Voir également setTransform().

Context2D translate(real x, real y)

Déplace l'origine du canevas d'une distance horizontale de x et d'une distance verticale de y, en unités de l'espace de coordonnées.

Le décalage de l'origine vous permet de dessiner des motifs composés de différents objets sur le canevas sans avoir à mesurer manuellement les coordonnées de chaque forme.