Tutoriel de dessin sur toile html5 (9) – Dessiner des rectangles et des cercles dans les compétences du didacticiel canvas_html5

Cet article explique comment dessiner des rectangles et des cercles sur Canvas. Ce sont des graphiques de base. Bien sûr, il existe des graphiques plus basiques qu'eux, mais dans Canvas, vous ne pouvez dessiner que des rectangles et des cercles sans utiliser d'autres méthodes pour les simuler.

Canvas dessine un rectangle
1, fillRect et StrokeRect
fillRect peuvent remplir directement un rectangle, et le style de remplissage est le style que vous définissez actuellement ; la même chose La raison d'être de StrokeRect est de tracer directement un rectangle
Leurs paramètres sont cohérents, dans l'ordre (point de départ x, point de départ y, largeur rectangulaire, hauteur rectangulaire). Notez que le point de départ ici fait référence au coin supérieur gauche du rectangle.
Nous les utilisons généralement pour faire des choses simples, et ils ne peuvent faire que des choses simples. Pourquoi? Parce qu’il n’y a pas de « chemin » dans les graphiques qu’ils ont dessinés, il est simplement sorti directement.
Par exemple, si vous remplissez d'abord un rectangle avec fillRect, puis que vous souhaitez tracer le rectangle, si vous utilisez Stroke(), cela n'aura aucun effet, car même s'il y a un rectangle, il n'y a pas de chemin.
Si vous voulez désespérément tracer ce rectangle, vous pouvez utiliser StrokeRect() pour tracer un rectangle à la même position - mais ils sont en fait indépendants, se chevauchant simplement.

Copier le code

Le code est le suivant :

ctx.fillRect(200,100, 50,40 );
ctx.StrokeRect(200,100,50,40);

Si nous voulons un rectangle avec à la fois un remplissage et un contour, alors utiliser fillRect et StrokeRect en même temps le fera sans aucun doute être encombrant. Donc, dans ce cas, nous utilisons généralement la méthode suivante.

2, rect
Les paramètres de rect ne sont pas différents de fillRect et StrokeRect La différence est qu'il ne dessine qu'un chemin. Quant au trait ou au remplissage, vous devez le faire. complétez-le vous-même plus tard.

Copier le code

Le code est le suivant :

ctx.rect(300,100, 50,40 );
ctx.stroke()
ctx.fill();

Quels sont les avantages de faire cela ? J'ai mentionné dans l'article précédent que remplir ou caresser consomme beaucoup de ressources, nous devons donc souvent tracer des centaines de chemins à la fois (comme des boucles), puis les caresser ou les remplir. À ce stade, utilisez rect pour tracer le chemin et le remplir à la fin, ce qui évite le problème de fillRect et StrokeRec devant remplir ou contourner à chaque fois.

3, lineTo
Bien sûr, vous pouvez également utiliser 4 lineTo pour dessiner un rectangle comme mon tutoriel de dessin au trait. Mais ce n’est pas nécessaire, consultez cet article pour plus de détails.

La toile dessine un cercle
Il n'y a pas d'œil dans le ciel En fait, la toile n'a pas de véritable fonction qui permet de dessiner directement un cercle. Arc de 360 ​​degrés, cela ressemble à un cercle.
Nous avons déjà parlé de la fonction du canevas pour dessiner des arcs, à savoir l'arc. Nous l'utilisons pour dessiner un cercle :

Copier le code.

Le code est le suivant :

ctx.arc(300 25,100 20,20,0,Math.PI*2
ctx.stroke() ctx. fill();

Cet arc est le même que rect, il dessine également un chemin, et le remplissage ou le trait doit être complété plus tard.
Mais il faut noter que le jugement de position d'un cercle est différent de celui d'un rectangle. Nous utilisons le coin supérieur gauche du rectangle comme point de départ pour déterminer sa position, mais nous utilisons généralement le centre du cercle pour déterminer la position du cercle.
Si vous souhaitez dessiner un ensemble de rectangles et de cercles centrés horizontalement et verticalement, vous devez vous rappeler de ne pas considérer le point de départ du rectangle comme le point de départ du cercle - le point de départ du cercle est le centre de le cercle !

Oubliez ça, laissez-moi vous donner la formule actuelle Pour les cercles et rectangles alignés, les coordonnées du centre du cercle = les coordonnées du rectangle et la moitié de la largeur et de la hauteur du rectangle.
C'est-à-dire centre du cercle x = rectangle x largeur du rectangle/2, cercle y = rectangle y hauteur du rectangle/2. De cette façon, ils sont parfaitement alignés.
Bien que l'arc ne soit pas aussi simple à utiliser que la méthode de dessin direct d'un cercle - la méthode que j'ai envisagée pour dessiner directement un cercle ne nécessite que 3 paramètres, à savoir les coordonnées du centre du cercle et le rayon - mais l'arc peut dessinez non seulement des cercles, mais aussi des demi-cercles, etc., la fonction est donc plus puissante et vous pouvez vous en contenter.
Puisqu'il y a un cercle, il devrait y avoir une ellipse, mais il n'y a même pas de fonction régulière pour dessiner un cercle sur toile, encore moins une ellipse. Par conséquent, dessiner une ellipse doit être simulé par d’autres méthodes. C’est plus compliqué, je le laisserai donc pour plus tard.