Basé sur HTML5 Canvas : explication détaillée des chaînes, des chemins, des arrière-plans et des compétences du didacticiel pictures_html5

La méthode pour créer un Canvas est la suivante :

Copier le code

Le code est le suivant :

Peut être trouvé sur Ajouter le texte alternatif lorsque la balise n'est pas disponible, comme suit :

Copiez le code

Le code est le suivant :

Votre navigateur ne le fait pas prend en charge l'élément canvas.

Actuellement, les nouvelles versions de divers navigateurs ont progressivement commencé à prendre en charge HTML5, donc avant de commencer à l'utiliser, assurez-vous que votre navigateur est une nouvelle version de Chrome, Firefox ou un navigateur supérieur à IE9. La balise

elle-même n'a pas la capacité de dessiner des images. Elle fournit uniquement une zone permettant à JavaScript de dessiner des images, le travail de dessin doit donc être effectué en JavaScript. Voici le travail de préparation nécessaire avant de dessiner :

Copiez le code

Le code est le suivant :

var canvas = document.getElementById("canvas");
var context2D = canvas.getContext("2d");

Vous devez d'abord récupérer l'objet canevas la page Web, puis utilisez La méthode getContext() récupère l'objet de dessin bidimensionnel du canevas. Le paramètre "2d" de la méthode getContext() signifie deux dimensions (on dit qu'il sera étendu à trois dimensions dans le futur, mais actuellement le seul paramètre disponible est "2d").

L'objet Contexte obtenu est un objet HTML5 intégré, qui contient de nombreuses méthodes de dessin et d'ajustement graphiques. En l'utilisant en JavaScript, vous pouvez dessiner les graphiques requis dans le canevas.

Chaîne

Utilisez la méthode fillText() de l'objet Context pour dessiner une chaîne dans le canevas. Le prototype de la méthode fillText() est le suivant :

void fillText(text, left,top, [maxWidth]);

La signification de ses quatre paramètres est : la chaîne à dessiner, l'abscisse et l'ordonnée du coin supérieur gauche du canevas lorsqu'il est dessiné dans le canevas, et la longueur maximale de la chaîne dessinée. La longueur maximale maxWidth est un paramètre facultatif.

De plus, vous pouvez ajuster la police et la taille de la chaîne en modifiant l'attribut de police de l'objet Context. La valeur par défaut est "10px sans-serif".

L'exemple suivant affiche la chaîne "Hello Canvas!" dans le canevas (le coin supérieur gauche de la chaîne est au centre du canevas)

Copier le code

Le code est le suivant :

Votre navigateur ne prend pas en charge l'élément canvas !

Chemin

Les graphiques de base de HTML5 Canvas sont basés sur des chemins. Habituellement, les méthodes moveTo(), lineTo(), rect(), arc() et d'autres méthodes de l'objet Context sont utilisées pour tracer d'abord les points de chemin du graphique sur le canevas, puis la méthode fill() ou Stroke(). est utilisé pour remplir le graphique ou dessiner en fonction de la ligne des points du chemin.

Habituellement, vous devez appeler la méthode startPath() de l'objet Context avant de commencer à tracer un chemin. Sa fonction est d'effacer le chemin précédent et de rappeler au Context de commencer à tracer un nouveau chemin. ) est appelée, tous les chemins précédents seront dessinés. Le chemin affecte l'effet de dessin et affecte également les performances de la page Web en raison des opérations répétées. De plus, l'appel de la méthode closePath() de l'objet Context peut fermer explicitement le chemin actuel, mais le chemin ne sera pas effacé.

Voici des prototypes pour certaines méthodes de dessin de chemins :

void moveTo(x, y);

est utilisé pour spécifier explicitement le point de départ du chemin. Par défaut, le point de départ du premier chemin est le point (0, 0) du canevas et les points de départ suivants sont les points d'arrivée du chemin précédent. Les deux paramètres sont divisés en valeurs de coordonnées x et y représentant le point de départ.

void lineTo(x, y);

est utilisé pour tracer un chemin droit depuis le point de départ jusqu'à la position spécifiée. Une fois le dessin terminé, le point de départ dessiné se déplacera vers la position spécifiée. Les paramètres représentent les valeurs des coordonnées x et y de l'emplacement spécifié.

void rect(gauche, haut, largeur, hauteur);

est utilisé pour dessiner un rectangle avec une position, une largeur et une hauteur du sommet supérieur gauche connues. Une fois le dessin terminé, le point de départ du dessin du contexte se déplacera vers le sommet supérieur gauche du rectangle. Les paramètres représentent les coordonnées x et y du coin supérieur gauche du rectangle ainsi que la largeur et la hauteur du rectangle.

void arcTo(x1, y1, x2, y2,rayon);

est utilisé pour tracer un arc tangent à deux segments de ligne. Les deux segments de ligne prennent le point de départ actuel du dessin contextuel et le point (x2, y2) comme point de départ, et les deux se terminent au (x1, y1). ) point de l'arc. Le rayon est le rayon. Une fois le dessin terminé, le point de départ du dessin se déplacera vers le point tangent entre le segment de ligne et l'arc à partir de (x2, y2).

arc vide (x, y, rayon,angle de départ, angle de fin, dans le sens inverse des aiguilles d'une montre);

est utilisé pour dessiner un arc avec le point (x, y) comme centre, radius comme rayon, startAngle comme radian de départ et endAngle comme radian de fin. antihoraire est un paramètre booléen, vrai signifie dans le sens inverse des aiguilles d'une montre, faux signifie dans le sens des aiguilles d'une montre. Les deux radians dans les paramètres sont représentés par 0°, et la position est à 3 heures ; la valeur Math.PI représente 180°, et la position est à 9 heures.

void quadraticCurveTo(cpx,cpy, x, y);

est utilisé pour tracer un chemin de spline quadratique avec le point de départ actuel du dessin du contexte comme point de départ, le point (cpx, cpy) comme point de contrôle et le point (x, y) comme point final.

void bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);

est utilisé pour tracer un chemin de courbe de Bézier avec le point de départ actuel du dessin du contexte comme point de départ, le point (cpx1, cpy1) et le point (cpx2, cpy2) comme deux points de contrôle, et le point (x, y) comme le point final.

Une fois le tracé du chemin terminé, vous devez appeler les méthodes fill() et Stroke() de l'objet Context pour remplir le chemin et tracer les lignes du chemin, ou appeler la méthode clip() pour découper la zone Canvas. Les prototypes des trois méthodes ci-dessus sont les suivants :

coup vide();

Utilisé pour tracer des lignes selon les chemins existants.

void fill();

Utilisé pour remplir la zone du chemin en utilisant le style de remplissage actuel.

vider le clip();

Utilisé pour définir la zone de détourage dans le canevas en fonction de l'itinéraire existant. Après avoir appelé la méthode clip(), le code de dessin graphique n’est efficace que dans la zone de découpage et n’affecte plus le canevas en dehors de la zone. Si le chemin n'est pas dessiné avant l'appel (c'est-à-dire dans l'état par défaut), la zone de découpage résultante est la totalité de la zone Canvas.

De plus, l'objet Context fournit également les propriétés correspondantes pour ajuster les styles de ligne et de remplissage, comme indiqué ci-dessous :

StrokeStyle

La couleur de la ligne, la valeur par défaut est "#000000", sa valeur peut être définie sur une valeur de couleur CSS, un objet dégradé ou un objet motif.

fillStyle

La couleur de remplissage est par défaut "#000000". Comme StrokeStyle, la valeur peut également être définie sur une valeur de couleur CSS, un objet dégradé ou un objet motif.

largeur de ligne

La largeur de la ligne, l'unité est le pixel (px), la valeur par défaut est 1,0.

lineCap

Le style de point final de la ligne, vous avez le choix entre trois types : bout à bout (aucun), rond (tête ronde) et carré (tête carrée).

lineJoin

Il existe trois styles de points d'inflexion des lignes : rond (coins arrondis), biseauté (coins plats) et onglet (coins pointus) ; le type est disponible pour la sélection et la valeur par défaut est l'onglet.

miterLimit

Un programme pointu pour plier les coins pointus des lignes, la valeur par défaut est 10.

L'exemple suivant appelle certaines des méthodes et propriétés ci-dessus pour dessiner des graphiques :

Copier le code

Le code est le suivant :

Votre navigateur ne prend pas en charge l'élément canevas !

< ;/canvas>

Fond de toile

Dans l'exemple ci-dessus, la méthode fillRect() est appelée. En fait, l'objet Context dispose de 3 méthodes qui permettent de dessiner des graphiques directement sur le canevas sans chemin. Il peut être considéré comme dessinant directement sur l'arrière-plan du canevas. Les prototypes de ces trois méthodes sont les suivants :

void fillRect(left, top,width, height);

Utilisé pour remplir un rectangle avec le sommet du coin supérieur gauche au point (gauche, haut), la largeur comme largeur et la hauteur comme hauteur en utilisant le style fillStyle actuel (la valeur par défaut est "#000000", noir).

void StrokeRect(gauche, haut, largeur, hauteur);

est utilisé pour dessiner une bordure rectangulaire avec le sommet du coin supérieur gauche au point (gauche, haut), la largeur comme largeur et la hauteur comme hauteur en utilisant le style de ligne actuel.

void clearRect(gauche, haut, largeur, hauteur);

Utilisé pour effacer tout le contenu de la zone rectangulaire avec le sommet supérieur gauche au point (gauche, haut), la largeur comme largeur et la hauteur comme hauteur.

Photos

L'objet contextuel a la méthode drawImage() pour dessiner des images externes dans Canvas. Les trois prototypes de la méthode drawImage() sont les suivants :

drawImage(image, dx, dy);

drawImage(image, dx, dy,dw, dh);

drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);

La figure suivante montre la signification de chaque paramètre dans le prototype :

Parmi eux, le paramètre image peut être HTMLImageElement, HTMLCanvasElement ou HTMLVideoElement. Les sx et sy dans le troisième prototype de méthode sont tous deux 0 dans les deux premiers, et sw et sh sont tous deux la largeur et la hauteur de l'image elle-même ; les dw et dh dans les deuxième et troisième prototypes sont également tous deux dans le premier. sont la largeur et la hauteur de l'image elle-même.

L'exemple suivant dessine une image distante dans le canevas :

Copiez le code

Le code est le suivant :

Votre navigateur ne prend pas en charge l'élément canvas !

Le code ci-dessus est transmis via le test du navigateur Google Chrome 14.0 et Mozilla Firefox 7.0.