Tutoriel de dessin en toile HTML5 (9) - Dessinez des rectangles et des cercles en toile

Cet article parlera de la méthode de dessiner des rectangles et des cercles en toile, ils appartiennent à des graphiques de base. Bien sûr, il y en a plus que des graphiques de base, mais dans la toile, seul des rectangles et des cercles ne nécessite pas d'autres simulations.

FillRect peut remplir directement un rectangle, et le style de remplissage est le style que vous définissez actuellement; De même, Strokect doit caresser directement un rectangle

Leurs paramètres sont cohérents, à leur tour (point de départ x coordonnées, point de départ Y, largeur du rectangle, hauteur du rectangle). Le point de départ ici, note, fait référence au point dans le 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 que les mots que les graphismes qu'ils tirent n'ont pas de chemins, ils sont sortis directement.

Par exemple, si vous remplissez d'abord un rectangle avec Fillrect, vous souhaitez caresser le rectangle. Si vous utilisez Stroke (), il n'y aura aucun effet, car bien qu'il y ait un rectangle à ce moment, il n'y a pas de chemin.

Si vous êtes impatient de caresser ce rectangle, vous pouvez utiliser Strokect () pour caresser un rectangle à la même position - mais ils sont en fait indépendants, juste des positions qui se chevauchent.

CTX.Fillrect (200,100,50,40);

ctx.strokect (200,100,50,40);

Si nous voulons un rectangle qui est rempli et caressé, il sera sans aucun doute lourd d'utiliser Fillrect et Strokect en même temps. Donc, dans ce cas, nous utilisons généralement la méthode suivante.

Les paramètres de RECT ne sont pas différents de Fillrect et Strokect. La différence est qu'ils ne tirent que le chemin, et vous devez compléter la course ou vous remplir plus tard.

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

ctx.stroke ()

ctx.fill ();

Quels sont les avantages de faire cela? Dans l'article précédent, j'ai mentionné que le remplissage ou un accident vasculaire cérébral consomme beaucoup de ressources, donc nous (comme des boucles), nous devons souvent dessiner des centaines de chemins à la fois, puis nous diriger ou remplir. À l'heure actuelle, utilisez RECT pour dessiner le chemin, puis le remplir à nouveau, ce qui évite le problème du remplissage de remplissage et de starkerec ou un coup à chaque fois.

Bien sûr, vous pouvez également utiliser 4 Linesto dessiner un rectangle comme mon tutoriel sur les lignes de dessin. Mais ce n'est pas nécessaire, veuillez consulter cet article pour plus de détails.

Le ciel n'a pas d'yeux. En fait, Canvas n'a pas de fonction réelle qui peut dessiner directement un cercle. Ce qu'il dessine, c'est en fait un arc à 360 degrés, qui ressemble à un cercle.

Nous avons mentionné la fonction de toile dessinant un arc auparavant, c'est-à-dire l'arc. Nous l'utilisons pour dessiner un cercle:

ctx.arc (300 + 25,100 + 20,20,0, math.pi * 2);

ctx.stroke ()

ctx.fill ();

Cet arc est le même que le RECT, et le chemin est tracé, et le remplissage ou la course doit être achevé plus tard.

Mais il convient de noter que le jugement de position d'un cercle est différent de celui d'un rectangle. Nous déterminons sa position avec le coin supérieur gauche du rectangle comme point de départ, mais nous déterminons généralement la position du cercle avec le centre du cercle.

Si vous voulez 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 du cercle!

Oubliez-le, je ferais mieux de vous donner une formule maintenant, des cercles et des rectangles alignés, des coordonnées du centre du cercle = coordonnées des rectangles + la moitié de la largeur et de la hauteur des rectangles.

C'est-à-dire le centre du cercle x = rectangle x + largeur de rectangle / 2, et le cercle y = rectangle y + rectangle hauteur / 2. De cette façon, ils sont absolument alignés.

Bien que l'arc ne soit pas aussi facile à utiliser comme méthode de dessin directement des cercles - la méthode de dessin directement des cercles que j'imaginais ne nécessite que 3 paramètres, à savoir les coordonnées centrales du cercle, c'est-à-dire le rayon - mais l'arc peut non seulement dessiner des cercles, mais aussi dessiner des demi-cercles, donc il est plus puissant et peut être utilisé.

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 en toile, sans parler d'une ellipse. Par conséquent, le dessin des ellipses doit être simulé à l'aide d'autres méthodes. C'est assez compliqué, donc je vais le laisser à l'étape suivante.