Commentaire: La largeur et la hauteur par défaut de la toile sont de 300 et 150. Pour éviter les exceptions, il est préférable d'utiliser des attributs d'affichage pour les ajouter au lieu d'utiliser CSS pour ajouter la largeur et la hauteur. Vous trouverez ci-dessous une brève introduction aux précautions d'utilisation du toile. Les amis intéressés peuvent y faire référence. J'espère que cela vous sera utile.
1. Tutoriel chinois Canvas https://developer.mozilla.org/zh-cn/docs/canvas_tutorial2. La largeur et la hauteur par défaut de la toile sont de 300 et 150. Pour éviter les exceptions, il est préférable d'utiliser des attributs d'affichage pour les ajouter au lieu d'utiliser CSS pour ajouter la largeur et la hauteur.
3. Instructions pour ajouter des navigateurs qui ne prennent pas en charge la balise de toile à l'intérieur de la balise de toile
4. Vous pouvez également déterminer si le navigateur prend en charge le canevas via le code JS suivant.
var canvas = document.getElementById ('tutoriel');
if (canvas.getContext) {
var ctx = canvas.getContext ('2d');
// Code de dessin ici
} autre {
// CODE COLEVAS-UNSUPPART ICI
}
5. Canvas ne prend en charge que le dessin d'une forme de base, c'est-à-dire des rectangles, mais d'autres figures peuvent être dessinées à travers le chemin de la toile.
6. Il existe quatre fonctions pour dessiner un rectangle: rect, fillrect, starekect et clearrect
7. La fonction de Beginpath est utilisée pour démarrer une nouvelle couche de chemin. S'il n'est pas ajouté, cela signifie dessiner sur la couche de chemin d'origine. Les effets des deux codes suivants sont complètement différents. Le premier code montre deux lignes rouges, et le deuxième code montre une ligne noire et une ligne rouge.
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.beginPath ();
ctx.moveto (100,5,20,5);
CTX.lineto (200,5, 20,5);
ctx.stroke ();
ctx.moveto (100,5,40,5);
ctx.lineto (200,5, 40,5)
ctx.strokestyle = '# f00';
ctx.stroke ();
var ctx = document.getElementById ('cvs'). getContext ('2d');
ctx.beginPath ();
ctx.moveto (100,5,20,5);
CTX.lineto (200,5, 20,5);
ctx.stroke ();
ctx.beginPath ();
ctx.moveto (100,5,40,5);
ctx.lineto (200,5, 40,5)
ctx.strokestyle = '# f00';
ctx.stroke ();
8. Si le chemin n'est pas tenu de fermer, un repos peut être utilisé. Si le remplissage est utilisé, le chemin sera automatiquement fermé. Il n'est plus nécessaire d'utiliser ClosePath.
9. Tant que vous avez une patience suffisante, vous pouvez utiliser la courbe de Bezier pour dessiner n'importe quelle figure.
10. Il y a un bug dans la courbe quadratique sous Firefox, de sorte que la courbe cubique peut être utilisée à la place de la courbe quadratique.
11. Des images (telles que PNG, GIF, JPEG, etc.) peuvent être introduites dans le toile, et d'autres éléments de toile peuvent également être utilisés comme source de l'image.
12. Ci-dessous est le code de dessin d'image de base de Canvas, où l'image est l'image ou l'objet en toile, X et Y sont leurs coordonnées de démarrage dans la toile cible
Drawimage (image, x, y)
Le code suivant représente l'image, la largeur et la hauteur zoomées représentent la taille zoomée
Drawimage (image, x, y, largeur, hauteur)
Le code suivant représente une image d'écrêtage. Le premier paramètre est le même que les autres, les deux sont des références à une image ou à une autre toile. Les 8 autres paramètres représentent respectivement les coordonnées x de départ de la coupe dans l'image, les coordonnées Y de départ de la coupe dans l'image, la largeur de la zone de coupe, la hauteur de la zone de coupe, les coordonnées X de la position dessinée, la taille des Y de la taille de la taille peut être différente Taille de l'image dessinée.
Drawimage (Image, Sx, Sy, Swidth, Sheight, Dx, Dy, Dwidth, Dheight)
13. Le strokestyle est utilisé pour définir la couleur du contour graphique, tandis que Fillstyle est utilisé pour définir la couleur de remplissage. La couleur peut être une chaîne, un objet gradient ou un objet de motif représentant la valeur de couleur CSS. Par défaut, les couleurs de ligne et de remplissage sont noires (valeur de couleur CSS # 000000).
14. La transparence de l'image peut être exprimée par GlobalAlpha = valeur de transparence ou valeur de couleur RGBA
15. La propriété Linewidth définit l'épaisseur de la ligne dessinée actuelle. Afin de résoudre le bug de largeur de ligne 1Px, +0,5 est utilisé pour le résoudre.
16. La ligne de la ligne la plus à gauche de l'attribut LineCap utilise le bout par défaut. On peut noter qu'il rigole avec la ligne auxiliaire. Au milieu est l'effet du rond, et un demi-cercle avec un rayon de la moitié de la largeur de la ligne est ajouté au point final. À droite, l'effet du carré, avec un carré avec une largeur égale et une hauteur de la moitié de la largeur de la ligne ajoutée au point final.
17. Ici, j'utilise également trois Polylines comme exemple pour définir différentes valeurs de linejoin. Le haut est l'effet du rond, les bords et les coins sont arrondis et le rayon du cercle est égal à la largeur de la ligne. Le milieu et le fond sont respectivement les effets de biseau et mitre. Lorsque la valeur est mitre, le segment de ligne s'étendra à l'extérieur de la connexion jusqu'à ce qu'il se croise à un moment donné. L'effet d'extension est limité par l'attribut miterlimit à introduire ci-dessous
18. Les méthodes de sauvegarde et de restauration sont utilisées pour enregistrer et restaurer l'état de canevas, et aucun n'a de paramètres. L'état de toile est un instantané de tous les styles et déformations appliqués à l'écran actuel. L'état de toile est enregistré sous la forme d'un tas (pile). Chaque fois que la méthode de sauvegarde est appelée, l'état actuel sera poussé dans le tas et enregistré. Chaque fois que la méthode de restauration est appelée, l'état enregistré précédent apparaît du tas et tous les paramètres sont restaurés.
19. Transform (1, 0, 0, 1, 0, 0) Les paramètres représentent une mise à l'échelle horizontale, une rotation horizontale (dans le sens horaire), une rotation verticale (dans le sens antihoraire), une mise à l'échelle verticale, un décalage horizontal, un décalage vertical
SetTransform (1, 0, 0, 1, 0, 0) signifie réinitialiser la matrice de transformation précédente, puis construire une nouvelle matrice. Les paramètres sont les mêmes que ci-dessus
Rotation (angle), (un rayon est égal à 1 radian, 2πr / r = radian, c'est-à-dire 360 = 2π, c'est-à-dire 1 = π / 180)
20. L'animation efface constamment le tableau artistique (ClearRect ()), puis la repeindre