Tutoriel de dessin de la toile HTML5 (10) - Dissemblez la surface en lignes pour simuler un rectangle arrondi

Commentaire: Dans l'article précédent, j'ai parlé de la méthode de dessiner des rectangles et des 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. Nous utilisons la capacité de diviser la surface en lignes, et il est facile de constater que le rectangle arrondi est en fait composé de 4 courbes de crochet. Les amis intéressés peuvent en savoir plus.

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 graphique 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.

Voici 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.