Zusammenfassung der Punkte, die bei der Verwendung von Canvas_html5-Tutorial-Fähigkeiten zu beachten sind

1. Canvas-Chinesisch-Tutorial https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

2. Die Standardbreite und -höhe von Canvas sind 300 und 150. Um Ausnahmen zu vermeiden, ist es am besten, dies zu tun Verwenden Sie Anzeigeattribute, um sie hinzuzufügen, ohne CSS zu verwenden

3. Fügen Sie Anweisungen für Browser hinzu, die das Canvas-Tag nicht unterstützen.

4 Browser unterstützt Canvas durch den folgenden js-Code

Code kopieren

Der Code lautet wie folgt:

var canvas = document.getElementById('tutorial ');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// Zeichencode hier
} else {
// Canvas-nicht unterstützter Code hier
}

5. Canvas unterstützt nur das Zeichnen einer Grundform, nämlich eines Rechtecks, aber andere Grafiken können durchgezeichnet werden Canvas-Pfad

6. Rechteck zeichnen Es gibt vier Funktionen: rect, fillRect, StrokeRect und clearRect

7. beginPath wird verwendet, um eine neue Pfadebene zu starten Die Wirkung der folgenden beiden Codeteile ist völlig unterschiedlich: Der erste Code zeigt zwei rote Linien, der zweite Code zeigt eine schwarze Linie und eine rote Linie

Code kopieren

Der Code lautet wie folgt:

var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo (100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.moveTo(100.5 ,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';

Code kopieren Der Code lautet wie folgt:

var ctx = document.getElementById('cvs').getContext( '2d');

ctx.moveTo(100.5,20.5);
ctx.streich(); ctx.beginPath();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.StrokeStyle = '#f00';


8. Si vous n'avez pas besoin de fermer le chemin, vous n'avez pas besoin d'utiliser closePath. Si vous utilisez fill, le chemin sera fermé automatiquement
<.>9. Tant que vous avez assez de patience, vous pouvez l'utiliser. La courbe de Searle peut être utilisée pour dessiner n'importe quel graphique

10. Il y a un bug dans la courbe quadratique sous Firefox, donc la courbe cubique. peut être utilisé à la place de la courbe quadratique

11. Des images (telles que PNG, GIF, JPEG, etc.) peuvent être introduites dans le canevas, et d'autres éléments du canevas peuvent également être utilisés comme source d'images

12. Ce qui suit est le code de base pour dessiner une image sur un canevas, où image est une image ou un objet canevas, x et y sont ses coordonnées de départ dans le canevas cible

drawImage(image, x, y)
Le code suivant représente la mise à l'échelle de l'image, la largeur et la hauteur représentent la taille zoomée
drawImage(image, x , y, width, height)
Le morceau de code suivant représente la découpe d'une image. Le premier paramètre est. les mêmes que les autres, tous deux sont des références à une image ou à une autre toile. Les huit autres paramètres représentent respectivement la coordonnée x de départ du recadrage dans l'image, la coordonnée y de départ du recadrage dans l'image, la largeur de la zone de recadrage, la hauteur de la zone de recadrage, la coordonnée x de la position dessinée, le y coordonnée de la position dessinée et la largeur du graphique dessiné. La hauteur du graphique dessiné et la taille de la zone de recadrage peuvent être différentes de la taille du graphique dessiné. Dans ce cas, elle sera adaptée à la taille de. l'image dessinée

drawImage(image, sx, sy, sWidth, sHeight, dx , dy, dWidth, dHeight)
13. StrokeStyle est utilisé pour définir la couleur du contour graphique et fillStyle est utilisé. pour définir la couleur de remplissage. color peut être une chaîne représentant une valeur de couleur CSS, un objet dégradé ou un objet motif. 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 représentée par globalAlpha = valeur de transparence ou valeur de couleur rgba

15 L'attribut lineWidth définit l'épaisseur de la ligne actuellement tracée afin de résoudre la largeur de ligne de 1 px. problème de bug, 0.5 est utilisé. Méthodes de résolution

16. La ligne la plus à gauche de l'attribut lineCap utilise le bouton par défaut. Notez qu'il affleure la ligne de guidage. Celui du milieu est l'effet rond, avec un demi-cercle d'un rayon de la moitié de la largeur de la ligne ajouté au point final. Celui de droite est l'effet de carré, avec un carré de largeur égale et la moitié de la largeur de la ligne ajouté au point final

17 attribut LineJoin Ici, j'utilise également trois polylignes comme exemple et je définis différents lineJoin. valeurs respectivement. Celui du haut est l'effet d'arrondi, les coins sont arrondis et le rayon du cercle est égal à la largeur de la ligne. Les lignes du milieu et du bas sont respectivement les effets du biseau et de l’onglet. Lorsque la valeur est mitre, le segment de ligne s'étendra à l'extérieur de la connexion jusqu'à ce qu'il se croise en un point. L'effet d'extension est limité par l'attribut miterLimit qui sera introduit ci-dessous

18. Les méthodes de sauvegarde et de restauration sont utilisées pour. enregistrez et restaurez l'état du canevas, tous n'ont aucun paramètre. L'état du canevas est un instantané de tous les styles et transformations appliqués à l'écran actuel. L'état du canevas est enregistré dans une pile. Chaque fois que la méthode de sauvegarde est appelée, l'état actuel sera poussé dans la pile et enregistré. Chaque fois que la méthode de restauration est appelée, le dernier état enregistré est supprimé du tas et tous les paramètres sont restaurés.

19. Les paramètres transform(1, 0, 0, 1, 0, 0) représentent respectivement la mise à l'échelle horizontale, la rotation horizontale (dans le sens des aiguilles d'une montre), la rotation verticale (dans le sens inverse des aiguilles d'une montre), la mise à l'échelle verticale, le décalage directionnel horizontal, le 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. La fonction du paramètre est la même que ci-dessus
rotate(angle) , (un rayon. est égal à 1 radian, 2πr/r=radians, soit 360=2π, soit 1=π/180)

20. L'animation consiste en fait à vider continuellement la planche à dessin (clearRect()). ) puis redessinez-le