4 façons de dessiner des ellipses en HTML5 Astuces du didacticiel Canvas_html5

Aperçu

Canvas en HTML5 ne fournit pas directement de méthode pour dessiner des ellipses. Ce qui suit est un résumé de plusieurs méthodes de dessin. Chaque méthode a ses propres avantages et inconvénients, qu’il convient de choisir en fonction de la situation. Les paramètres de chaque méthode sont les mêmes :

1.context est l'objet d'environnement de dessin 2D de Canvas,
2.x est l'abscisse du centre de l'ellipse,
3.y est l'ordonnée du centre de l'ellipse,
4.a est la longueur du demi-axe transversal de l'ellipse,
5.b est la longueur du demi-axe longitudinal de l'ellipse.

Méthode d'équation paramétrique

Cette méthode utilise l'équation paramétrique de l'ellipse pour dessiner l'ellipse

Copiez le code

Le code est tel suit :

//---------------Utiliser des équations paramétriques pour dessiner des ellipses---------------------
//Paramètres de fonction x et y sont le centre de l'ellipse ; a et b sont respectivement les demi-axes horizontal et vertical de l'ellipse
//La longueur du demi-axe vertical ne peut pas être égale à 0 à. en même temps.
//L'inconvénient de cette méthode est que lorsque lineWidth est plus large, l'ellipse sera plus petite lorsqu'elle est plate
//L'extrémité de l'axe long à l'intérieur de l'ellipse est plus nette, non lisse et moins efficace.
fonction ParamEllipse(context, x, y, a, b)
{
//max est égal à 1 Diviser par la plus grande des valeurs des grands axes a et b
//i augmente de 1/max à chaque cycle, indiquant une augmentation de degré
//Cela peut rendre le chemin (arc) tracé à chaque cycle proche de 1 pixel
var step = (a > b) ? : 1 / b;
context.beginPath();
context.moveTo(x a, y); //De l'ellipse Commencez à dessiner à partir de l'extrémité gauche
for (var i = 0; i < 2 * Math.PI; i = step)
{
//L'équation paramétrique est x = a * cos(i), y = b * sin(i),
//Le paramètre est i , indiquant le degré (radians)
context.lineTo(x a * Math.cos(i), y b * Math.sin(i));
}
context.closePath();
context .AVC();
};

Méthode de compression uniforme

Cette méthode utilise le principe de compression uniforme en mathématiques pour compresser uniformément un cercle en une ellipse. Théoriquement, une ellipse standard peut être obtenue. Le code suivant entraînera des largeurs de ligne incohérentes. Pour la solution, voir le commentaire de Simonleung sur le 5. sol. .

Copier le code

Le code est le suivant :

//------------Méthode de compression uniforme pour dessiner des ellipses--------------------
//Le méthode La méthode de l'arc est utilisée pour dessiner un cercle, combinée avec une échelle pour
//Échelle dans la direction de l'axe horizontal ou vertical (compression uniforme)
//Le bord de l'ellipse dessiné par cette méthode est plus épais car il est plus proche de l'extrémité de l'axe long, et plus l'axe est long La largeur de ligne du point final est la valeur normale
//Plus le bord est proche de l'axe mineur, plus l'ellipse sera plate et fine, et même une discontinuité se produira. C'est le résultat de l'échelle
//Cette lacune est parfois un avantage, comme lors de l'expression de l'effet tridimensionnel de l'anneau (halo planétaire)
//Pour le cas où le paramètre a ou b vaut 0, cette méthode n'est pas applicable
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
//Sélectionnez le plus grand de a et b comme paramètre de rayon de la méthode de l'arc
var r = (a > b) ? a : b;
var ratioX = a / r; //Rapport de mise à l'échelle de l'axe horizontal
var ratioY = b / r; //Rapport de mise à l'échelle de l'axe vertical
context.scale(ratioX, ratioY); //Échelle (compression uniforme)
context.beginPath();
//Dessinez dans le sens inverse des aiguilles d'une montre à partir de l'extrémité gauche de l'ellipse
context.moveTo((x a) / ratioX, y / ratioY);
context.arc(x / ratioX , y / ratioY, r, 0, 2 * Math.PI);
context.closePath ();
context.AVC();
context.restore();
};

Méthode de courbe de Bézier cubique 1

Dessiner une ellipse avec une courbe de Bézier cubique est une approximation en dessin réel, et c'est aussi une approximation en théorie. Mais en raison de sa grande efficacité, il est souvent utilisé pour dessiner des ellipses en infographie vectorielle, mais je ne suis pas très clair sur la théorie spécifique. Le degré de rapprochement réside dans le choix des positions des deux points de contrôle. Les positions des points de contrôle de cette méthode ont été obtenues par mes propres expériences, et la précision est correcte

Copiez le code

. Le code est le suivant :

//---------Utiliser la courbe de Bézier cubique pour simuler l'ellipse 1------------------------
//Cette méthode produira également le phénomène selon lequel lorsque la lineWidth est plus large et l'ellipse est plus plate,
//l'extrémité de l'axe long est plus nette et non lisse
function BezierEllipse1(context, x, y, a , b)
{
//La clé est le réglage des deux points de contrôle dans bezierCurveTo
//0,5 et 0,6 sont les deux coefficients clés (obtenus à partir d'expériences dans cette fonction)
var ox = 0,5 * a,
oy = 0,6 * b;

context.save();
context.translate(x, y);
context.beginPath();
//Dessinez dans le sens inverse des aiguilles d'une montre en commençant par l'extrémité inférieure de l'axe vertical de l'ellipse
context .moveTo(0, b);
context.bezierCurveTo(ox, b, a, oy, a, 0);
context.bezierCurveTo(a, -oy, ox, -b, 0 , -b) ;
context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
context.bezierCurveTo(-a, oy, -ox, b, 0, b );
context.closePath();
context.Stroke();
context.restore();

};

Méthode de courbe de Bézier cubique 2

Cette méthode a été modifiée à partir d'une réponse à un message dans StackOverFlow. Elle a une plus grande précision et est également une méthode couramment utilisée pour dessiner des ellipses

Copier. le code

Le code est le suivant :

//---------Utiliser la courbe de Bézier cubique pour simuler l'ellipse 2----- -- ----------------
//Cette méthode produira également le phénomène selon lequel lorsque la lineWidth est plus large et l'ellipse est plus plate
//, l'axe long la fin est plus nette et pas lisse
//Cette méthode est plus précise que la méthode Bézier précédente, mais légèrement moins efficace
fonction BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848 ,
ox = a * k, // Décalage du point de contrôle horizontal
oy = b * k; // Décalage du point de contrôle vertical

ctx.beginPath();
//Dessinez quatre courbes de Bézier cubiques dans le sens des aiguilles d'une montre en partant de l'extrémité gauche de l'ellipse
ctx.moveTo(x - a, y);
ctx.bezierCurveTo ( x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x ox, y - b, x a, y - oy, x a, y);
ctx.bezierCurveTo(x a, y oy, x ox, y b, x, y b);
ctx.bezierCurveTo(x - ox, y b, x - a, y oy, x - a, y);
ctx.closePath();
ctx.Stroke();
};

Méthode raster

Cette méthode peut utiliser des algorithmes de base dans les graphiques pour dessiner des ellipses en fonction des caractéristiques de Canvas qui peuvent exploiter les pixels. Par exemple, l'algorithme de dessin d'ellipse médiane, etc.

Un exemple est un article de blog de l'ami jardinier "Doudou Gou" "Classe d'amélioration du canevas HTML5 (1) - Graphiques raster (1) Algorithme de dessin de cercle médian". Cette méthode est relativement « originale », présente une grande flexibilité, une grande efficacité et une grande précision, mais elle est relativement compliquée à mettre en œuvre une fonction précieuse pour dessiner des ellipses. Par exemple, lorsque la largeur du trait change, l’algorithme est plus compliqué. Bien qu'il s'agisse d'un algorithme pour dessiner des cercles, l'algorithme pour dessiner des ellipses lui est similaire. Vous pouvez vous y référer ci-dessous.

Résumé

Fondamentalement, toutes les méthodes ne peuvent pas atteindre une précision de 100 % car elles sont limitées par la résolution d'affichage.

En fait, la meilleure méthode devrait être arc() scale(). La bibliothèque de dessins sur toile KineticJS utilise cette méthode.

Dans d'autres logiciels de dessin, il n'y a pas de méthode arc() scale() inhérente comme le canevas HTML5. Les courbes de Bézier sont généralement utilisées pour simuler des ellipses approximatives. Quel que soit le nombre de courbes de Bézier, ce ne sont que des approximations. Concernant l'utilisation des courbes de Bézier pour simuler des ellipses, vous pouvez vous référer à ces informations : Dessiner un arc elliptique à l'aide de polylignes, de courbes de Bézier quadratiques ou cubiques.

Étant donné que arc() scale() est une méthode déjà implémentée par le navigateur, elle a la précision théorique la plus élevée, elle est donc la meilleure en termes d'efficacité, de précision et de facilité d'utilisation.

Après avoir dessiné l'ellipse avec arc() scale(), les deux méthodes context.Stroke() et context.restore() sont appelées dans un ordre différent, et les résultats seront très intéressants. Habituellement, vous devez d'abord restaurer(), puis Stroke().

Démo

Voici plusieurs démonstrations de dessin de fonctions elliptiques en plus de la méthode raster. Le code de démonstration est le suivant :

Copier le code<.>Le code est le suivant :

执行