Dans l'article précédent, j'ai parlé des méthodes de dessin de rectangles et de cercles. Ils ont tous des fonctions de dessin en toile natif qui peuvent être remplies. Le rectangle arrondi mentionné dans cet article ne peut être simulé que par d'autres méthodes.
Pour un rectangle arrondi normal, supposons d'abord que les coins arrondis de ses quatre coins sont les mêmes - car cela est plus facile à dessiner. Nous utilisons la capacité de diviser la surface en lignes et il est facile de constater que le rectangle arrondait est en fait composé de 4 courbes de crochet.
En parlant de crochets, si vous avez lu mon article présentant Arcto, vous pouvez immédiatement comprendre que ce type de graphiques peut être dessiné à l'aide d'Arcto.
Lorsque j'ai parlé d'Arcto, j'ai mentionné qu'Arcto a une caractéristique que sa deuxième extension tangente n'affectera pas les lignes qu'il trace (dans la dernière partie ci-dessus), ce qui nous permet également de contenir des rectangles arrondis sans se soucier de la déformation.
Ce qui suit est la méthode de dessin de rectangles arrondi que j'ai trouvés sur un site Web étranger, qui devrait être le plus efficace.
// rectangle rond
CanvasRenderingContext2d.prototype.roundRect = fonction (x, y, w, h, r) {
if (w & lt; 2 * r) r = w / 2;
if (h & lt; 2 * r) r = h / 2;
this.beginPath ();
this.moveto (x + r, y);
this.arcto (x + w, y, x + w, y + h, r);
this.arcto (x + w, y + h, x, y + h, r);
this.arcto (x, y + h, x, y, r);
this.arcto (x, y, x + w, y, r);
// this.arcto (x + r, y);
this.closepath ();
retourner ceci;
}
Les paramètres de cette fonction sont les coordonnées x, les coordonnées Y, la largeur, la hauteur et le rayon d'angle arrondi. Portez une attention particulière au dernier paramètre - rayon d'angle arrondi.
Cette méthode utilise Arcto 4 fois pour dessiner un rectangle arrondi, et les arcs de chaque coin sont les mêmes. Le point de coordonnée de ce rectangle arrondi est également le même coin supérieur gauche que le rectangle, mais son point de départ n'est pas là, mais:
Vous pouvez supprimer l'une des lignes et voir comment est cette méthode.
Bien sûr, je voudrais vous rappeler que, quelle que soit la forme que vous dessinez, vous devez vous rappeler de fermer le chemin - Closepath pour éviter de laisser des dangers cachés.
Cette méthode a un retour à la fin, qui vous permet d'utiliser la syntaxe de la chaîne, comme:
CTX.RoundRect (200 300,200,120,20,20) .stroke (); Vous pouvez le supprimer si vous n'en avez pas besoin.
Si vous ne souhaitez pas agrandir le prototype ContexTrenderingContext2d, vous pouvez également utiliser cette méthode pour faire une autre fonction.
Quand j'ai découvert cette fonction, je ne savais même pas ce qu'était Arcto, donc je ne me souvenais pas du site Web que je l'ai trouvé. Quoi qu'il en soit, ce n'était pas original par moi. Merci à l'auteur.
Dans l'article précédent, j'ai toujours souligné que chaque coin du rectangle arrondi dessiné dans cette méthode est cohérent parce que le rayon frontalier dans CSS3 peut facilement dessiner des rectangles arrondi avec des arcs incohérents de chaque coin ou même de chaque coin. Je trouverai un moyen de dessiner des rectangles arrondis irréguliers dans la toile, mais je pense personnellement que c'est assez difficile.