Explication détaillée des API HTML5 Convas méthodes_html5 compétences du didacticiel

☆ canvas.getContext('2d')

Vous ne pouvez pas dessiner directement dans la toile, vous devez utiliser cette méthode pour obtenir le
sous-jacent de son dessin spatial bidimensionnel.

☆ context.beginPath()

indique le début d'un nouveau dessin de chemin.

☆ context.isPointInPath(x, y)

Déterminez si un certain point se trouve sur le chemin. Cette méthode ne fonctionne pas une fois le système de coordonnées transformé.

☆ context.moveTo(x,y)

équivaut à soulever le pinceau de la planche à dessin, en laissant la pointe du stylo éloignée de la planche à dessin, puis à positionner la pointe du stylo aux coordonnées
(x, y) et à commencer un nouveau dessin à cette nouvelle position .

☆ context.lineTo(x, y)

équivaut à la pointe du pinceau qui ne quitte pas la planche à dessin. La pointe du pinceau se déplace de la position actuelle des coordonnées à la coordonnée
(x, y) pour dessiner un segment de ligne.

☆ contexte.AVC()

Après avoir dessiné sur le canevas, certaines opérations de dessin doivent appeler cette méthode pour permettre au contenu dessiné
d'être affiché.

☆ context.save()

Cette méthode enregistre l'état actuel du convas, quelles que soient les modifications apportées au convas dans le futur.
Tant que vous enregistrez l'état du convas avant d'effectuer ces modifications, vous pouvez appeler
context.restore. () pour le restaurer à l'état enregistré ultérieurement. Habituellement, l'état d'origine de la toile (sans aucun dessin ni modification
) doit être enregistré avant un nouveau dessin
ou une opération de modification, et restauré à l'état d'origine à chaque fois après la fin d'une nouvelle opération de dessin ou de modification. Ce
sera utile pour les futures opérations de dessin.
En fait, de nombreuses propriétés et certaines méthodes du contexte de l'environnement de dessin 2D du canevas sont liées à l'état
Lorsque la valeur de chaque propriété est modifiée (ou que certaines méthodes sont utilisées pour changer l'état du dessin), le L'état du dessin est Changement. S'ils sont enregistrés après chaque modification, plusieurs états d'un attribut seront enregistrés sous la forme d'une pile. Vous pouvez appeler la méthode restaurer() plusieurs fois dans l'ordre de la pile pour revenir à l'état enregistré correspondant.


☆ context.translate(x, y)

Cette méthode déplace l'origine actuelle des coordonnées vers (x, y).

☆ context.restore()

Restaurez l'état du canevas au dernier état enregistré.

☆ context.closePath()

Cette commande a un comportement très similaire à celui de la fonction lineTo , à la différence que la destination est

automatiquement supposée être l'

origine du chemin. Cependant, closePath informe également le canevas que la forme actuelle a fermé ou formé une
zone complètement contenue. Cela sera utile pour les futurs
remplissages et traits
À ce stade, vous êtes libre de continuer avec plus de
segments. dans votre chemin pour créer des sous-chemins supplémentaires. Vous pouvez également
commencerPath à tout moment pour recommencer et effacer entièrement la
liste des chemins.


☆ context.fill();

Remplissez le chemin fermé après avoir défini le style de remplissage. Il n'est pas nécessaire d'appeler la méthode context.Stroke() après avoir appelé cette méthode.

☆ context.fillRect(x, y, width, height)

Dessinez et remplissez une zone rectangulaire avec une largeur et une longueur (largeur, hauteur) en (x, y). Il n'est pas nécessaire d'appeler la méthode context.Stroke() après avoir appelé cette méthode.

☆ context.StrokeRect(x, y, width, height)

Dessinez un contour rectangulaire avec une largeur et une longueur (largeur, hauteur) en (x, y).

☆ context.clearRect(x, y, largeur, hauteur)

Nettoyez la zone rectangulaire dont la position (coin supérieur gauche du rectangle) est (x, y,) et la taille est (largeur, hauteur) . Supprimez tout contenu de la zone rectangulaire et réinitialisez-le

à sa couleur transparente d'origine

La possibilité d'effacer les rectangles dans le canevas est essentielle à
créer des animations et des jeux à l'aide de l'API HTML5 Canvas. En
dessinant et en effaçant à plusieurs reprises des sections de la toile, il
est possible de présenter l'illusion de l'animation, et de nombreux
exemples de cela existent déjà sur le Web. Cependant, il est possible de
créer des animations performantes. en douceur, vous devrez
utiliser des fonctionnalités de découpage et peut-être même un
canevas tampon secondaire pour minimiser le scintillement causé par les
effacements fréquents du canevas.


☆ context.drawImage( )

Cette méthode comporte trois surcharges, qui peuvent dessiner des images sur la toile. La source de l'image peut être la balise img dans la page
, l'objet image en JS et une image de la vidéo.
•context.drawImage(img, x, y)
Dessine une image avec image img en (x, y). Lorsque la taille du canevas est plus grande que l'image
, l'image entière est dessinée ; lorsque l'image est plus grande que le canevas, la partie excédentaire est rognée.
•context.drawImage(img, x, y, w, h)
Dessinez une zone rectangulaire avec la longueur et la largeur (w, h) en utilisant l'image img en (x, y). La taille de l'image
sera modifiée en (w, h).
•context.drawImage(img, imgx, imgy, imgw, imgh, cx, cy,
cw, ch)
Utilisez une image img comme objet de dessin et recadrez la position supérieure de img à ( imgx, imgy
) Une zone de taille (imgw, imgh) est dessinée à la position (cx, cy)
dans le canevas et une zone de taille (cw, ch) est dessinée.
Si la zone recadrée de l'image dépasse la plage de l'image, une exception sera levée.
•context.drawImage(video, vx, vy, vw, vh, cx, cy, cw, ch)
Utilisez un objet vidéo comme objet de dessin et saisissez la position supérieure de la vidéo (vx, vy
) Un cadre d'une taille de (vw, vh), dessinez une zone d'une taille de (cw, ch) à la position (cx, cy) sur la toile.
De plus, le premier paramètre de drawImage() peut également être un autre canevas.

☆ context.getImageData(x, y, largeur, hauteur)

Cette méthode obtient la taille (largeur, hauteur) à partir de la position (x, y) dans le canevas

Une zone de pixels, et la valeur de retour est un objet ImageData. ImageData a trois attributs : largeur,
hauteur et données. L'attribut
data est un tableau de pixels. Chaque quatre éléments consécutifs du tableau représente un pixel. Les quatre éléments consécutifs contiennent à leur tour des informations de couleur et de transparence RGBA. Quatre éléments consécutifs
doivent appartenir à un pixel, et la position du premier élément n'est pas choisie arbitrairement.
Le tableau de pixels est obtenu en scannant la zone spécifiée
dans le canevas dans l'ordre de haut en bas et de gauche à droite. Le nombre d'éléments dans le tableau de pixels est largeur * hauteur * 4. Pour obtenir des informations sur les pixels pour une position
spécifique.
Si une page Web qui utilise cette méthode est ouverte en tant que fichier local avec un navigateur, elle ne fonctionnera pas correctement
et une erreur de sécurité se produira généralement. Ce problème peut être résolu en téléchargeant le fichier sur le serveur Web
, puis en demandant l'accès. De plus, les images, JS et
HTML impliqués doivent provenir du même nom de domaine. Cependant, IE9 est accessible via des fichiers locaux.
Un exemple est le suivant :

Copiez le code Le code est le suivant :

// Obtenir une zone de pixels

var imageData = context.getImageData(0, 0, 3, 3); // 3x3
grid

var width = imageData.width;
//La position du pixel spécifique dans la zone de pixel
var x = 2;
var y = 2; est dans le tableau de pixels Index de l'élément correspondant
var pixelRedindex = ((y-1)*(width*4)) ((x-1)*4
var pixelGreenindex = pixelRedindex 1; >var pixelBlueindex = pixelRedindex 2 ;
var pixelAlphaindex = pixelRedindex 3

var pixel = imageData.data; // CanvasPixelArray

var rouge = pixel[pixelRedindex];
var vert = pixel[pixelGreenindex];




☆ context.createImageData(w, h)

Générer un objet ImageData de taille (w, h). La signification de l'objet ImageData est la même que l'objet ImageData obtenu par getImageData().

☆ context.putImageData(ImageData, x, y, x1, y1, w, h)

Dessinez un objet ImageData sur le canevas à (x, y). Les quatre derniers paramètres sont des paramètres facultatifs, utilisés pour définir la position et la taille d'un rectangle de recadrage.

☆ context.createLinearGradient(x1, y1, x2, y2)

Produire un dégradé linéaire entre (x1, y1) et (x2, y2). Par exemple :

Copier le code

Le code est le suivant :

var gradientName = context.createLinearGradient( -5, -50, 5, -50);

☆ Gradient.addColorStop(décalage, couleur)


Utilisé dans les dégradés pour définir les couleurs du dégradé à différents endroits. L'argument de couleur

est la couleur que vous souhaitez appliquer dans le trait ou le remplissage à la position de décalage. La position de décalage est une valeur comprise entre

0,0 et 1,0, représentant la distance le long de la ligne de dégradé la couleur doit être atteinte Tel que : gradientName.addColorStop(1, '#552200');

Color peut utiliser la fonction rgba(r,g,b,a) en CSS pour générer des dégradés transparents, tels que :

Copier le code

Le code est le suivant :

//Générer un dégradé transparent de couleur de 50 %
gradientName.addColorStop(0.2, 'rgba(0, 0, 0, 0.5)');

☆ context.createRadialGradient(x0, y0, r0, x1, y1, r1)

Créez une zone de dégradé radial entre deux cercles. Les trois premiers arguments
représentent un cercle centré en (x0, y0) de rayon r0, et
les trois derniers arguments représentent un deuxième cercle centré
en (x1, y1) de rayon r1. dessiné à travers la
zone située entre les deux cercles.

☆ context.createPattern(img, 'repeatPattern')

Utilisez une image img pour générer un style
StrokeStyle ou un style fillStyle rempli d'un certain chemin avec un type de répétition de repeatPattern. La valeur de repeatPattern peut
être une répétition, une répétition-x, une répétition-y et une non-répétition. Par exemple :

Copier le code

Le code est le suivant :

context.StrokeStyle = context.createPattern (gravier,
'repeat');

Le paramètre img peut également être une autre toile ou vidéo

☆ context.scale(xMultiple, yMultiple)

Les deux paramètres spécifient respectivement le facteur d'échelle de dessin ultérieur de l'objet dans les directions x et y. S'il est supérieur à 1,
signifie un zoom avant, et entre 0 et 1 signifie un zoom arrière. S'il s'agit d'une valeur négative, des effets tels que la réflexion et le retournement peuvent être obtenus
.

☆ contexte.rotate(angle)

est utilisé pour faire pivoter le contexte de l'environnement de dessin, avec l'origine des coordonnées actuelles comme centre de rotation, en radians
comme unité, et combiné avec Math.PI. Lorsque le paramètre angle est une valeur positive, il tourne dans le sens des aiguilles d'une montre, et lorsqu'il est une valeur négative, il tourne dans le sens inverse des aiguilles d'une montre.

☆ context.transform(ScaleX, skewY, skewX, ScaleY, transX, transY)

Cette fonction permet de contrôler la taille, le cisaillement et la position de l'objet de dessin

. ScaleX et ScaleY sont respectivement la mise à l'échelle des coordonnées x et y. skewY contrôle le cisaillement vertical du
contexte. Sa valeur peut être une virgule flottante positive ou négative ou un entier de n'importe quelle taille, ce qui équivaut à
exécuter y'= y skewY * x en ordonnée. Brochette Les deux derniers paramètres sont équivalents aux deux paramètres
dans Translate(x, y).


☆ context.setTransform(ScaleX, skewY, skewX, ScaleY,

transX, transY)

Cette méthode est similaire à la transformation, mais la méthode de transformation sera combinée avec les effets des méthodes de transformation, de mise à l'échelle et de rotation qui ont été appliquées auparavant, ce qui entraîne un effet de transformation composé complexe

. La méthode setTransform appliquera la transformation à partir de l'état d'origine du contexte et ne sera pas

composée avec la transformation précédente. Par conséquent, context.setTransform(1, 0, 0, 1,
0, 0) est couramment utilisé pour restaurer l'état de transformation du contexte à sa valeur d'origine.

☆ fillText (texte, x, y, largeur maximale)

Dessinez du texte rempli de texte aux coordonnées (x, y). maxwidth est un paramètre facultatif

, utilisé pour limiter la largeur de tout le texte et la somme de l'espacement du texte. Si la largeur de tout et l'espacement

dépasse cette valeur, la largeur d'un seul caractère de texte et l'espacement des caractères seront. compressé

Les caractères individuels s'allongent et l'espacement devient plus petit. Le texte de remplissage peut être dessiné en combinant context.font,
context.fillStyle, context.textAlign et d'autres attributs.


☆ StrokeText (texte, x, y, largeur maximale)

Dessinez du texte avec le texte du contenu du chemin aux coordonnées (x, y). maxwidt est un paramètre facultatif , utilisé pour limiter la largeur de tout le texte et la somme de l'espacement du texte. Si la largeur de tout et l'espacement

dépasse cette valeur, la largeur d'un seul caractère de texte et l'espacement des caractères seront. compressé

Les caractères individuels s'allongent et l'espacement devient plus petit. Le texte du chemin peut être dessiné en combinant context.font,
context.textAlign, context.lineWidth, context.StrokeStyle et d'autres
propriétés.
Par exemple :

Copier le code

Le code est le suivant :

var fontSize = 100 ;

context.font = fontSize "px Arial";

while(context.measureText("Hello world!").width > 140)
{
fontSize--;
context .font = fontSize "px Arial";
}
context.fillText("Bonjour tout le monde !", 10, 10);
context.fillText("La taille de la police est " fontSize "px ", 10, 50);

☆ context.measureText("text")

Cette méthode calcule
la taille de la zone occupée par le texte en fonction des valeurs actuelles de font, textAlign et textBaseline. Le paramètre texte est le contenu du texte utilisé pour dessiner. Cette méthode
renvoie un objet TextMetrics. Actuellement, l'objet TextMetrics n'a qu'une seule propriété
width, et d'autres propriétés pourraient être fournies à l'avenir.

☆ context.rect(x, y, w, h)

Dessinez un rectangle de largeur w et de hauteur h au point (x, y). Le point actuel est ignoré. Mais une fois le rectangle dessiné
, (x, y) devient le nouveau point actuel.

☆ context.arc(x, y, radius, startAngle, endAngle,
antihoraire)

Dessinez un arc. x, y sont les coordonnées du centre de l'arc ; radius est le rayon de l'arc ;
startAngle, endAngle sont respectivement le radian de départ et le radian de fin,
Pi est représenté par Math.PI, et la valeur est 0 L'arc est horizontal vers la droite ; dans le sens inverse des aiguilles d'une montre
indique la direction de dessin de l'arc, qui est un paramètre facultatif, la valeur booléenne, true est dans le sens inverse des aiguilles d'une montre, false
est dans le sens des aiguilles d'une montre et la valeur par défaut est false . En utilisant cette méthode, la méthode lineTo peut être omise. Après avoir utilisé la méthode
pour tracer un arc, le tracé du chemin suivant commencera à partir du point final de l'arc
.

☆ context.arcTo(x1, y1, x2, y2, rayon)

Le point actuel et (x1, y1) forment une ligne L1, (x1, y1) et (x2, y2) forment une autre
ligne L2, et le point actuel et (x2, y2) forment une troisième ligne L3. Si (x1, y1) est pris comme origine,
L1 et L2 sont les axes de coordonnées, le rayon est le rayon tangent à L1 et L2, et est sur le cercle O1 dans le même quadrant que le "segment de droite " L3, soit Le point tangent à L1 est p1, et le point tangent à L2 est p2. Il y a deux arcs entre p1
et p2 sur le cercle O1. L'arc le plus proche de l'origine (x1, y1) (également l'arc
le plus court du cercle) est l'arc dessiné.

De plus, un segment de ligne sera dessiné pour relier l'arc entre le point actuel et (x1, y1)

, car le dessin du chemin est continu, le segment de ligne entre le point actuel et (x1, y1) sera dessiné d'abord Dessinez, puis
puis dessinez l'arc. Le point tangent p2 devient le prochain point courant.
Cette méthode est souvent utilisée pour dessiner des rectangles arrondis.

☆ context.quadraticCurveTo(x1, y1, x2, y2)

Dessinez un segment de courbe de Bézier quadratique entre les coordonnées actuelles et (x2, y2), et la courbure est contrôlée par

(x1, y1). (x1, y1) n'est pas sur le segment de courbe.

D'autres options pour les courbes dans l'API HTML5 Canvas incluent

les fonctions bezierCurveTo, arcTo et arc
prennent des points de contrôle supplémentaires, un rayon ou des angles pour
déterminer les caractéristiques de la courbe. .

☆ context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Dessinez une courbe de Bézier cubique avec des points de contrôle (cp1x, cp1y) et (cp2x, cp2y)

entre le point actuel et (x, y) pour contrôler la courbure.

☆ contexte.clip()

Cette méthode créera une région de découpage

(région de découpage) basée sur le dernier chemin fermé dessiné. La zone de détourage est équivalente à un masque. Seule la partie du contenu dessiné dans le futur
qui se situe dans la zone de détourage sera affichée.

☆ context.isPointInPath(x, y)

Vérifiez si les coordonnées (x, y) se trouvent dans le chemin tracé. La valeur de retour est vraie ou

faux.

☆ canvas.toDataURL(type, args)

Cette méthode peut convertir le canevas en image, et l'image est basée sur l'encodage Base64. Si

ne spécifie pas deux paramètres, cette méthode est appelée sans paramètres et le format d'image converti est au format png
.
•type : Spécifiez le format d'image à convertir, tel que image/png, image/jpeg, etc.
•args : paramètres facultatifs. Par exemple, si le type est image/jpeg, args peut être une valeur comprise entre
0,0 et 0,1 pour spécifier la qualité de l'image.
Par exemple, le code suivant ouvrira le contenu dessiné dans le canevas dans une nouvelle fenêtre de navigateur
ou un nouvel onglet :

Copiez le codeLe code est le suivant :

var canvas = document.getElementById("myCanvas");
window.open(canvas.toDataURL("image/png "));