Zusammenfassung verschiedener Methoden zum Zeichnen von Ellipsen auf HTML5 Canvas_html5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Übersicht
Canvas bietet in HTML5 keine direkte Methode zum Zeichnen von Ellipsen. Im Folgenden finden Sie eine Zusammenfassung mehrerer Zeichenmethoden. Jede Methode hat ihre eigenen Vor- und Nachteile, die je nach Situation ausgewählt werden sollten. Die Parameter jeder Methode sind die gleichen:
Kontext ist das 2D-Zeichenumgebungsobjekt von Canvas,
x ist die Abszisse des Ellipsenzentrums,
y ist die Ordinate des Ellipsenzentrums,
a ist die Länge der transversalen Halbachse der Ellipse,
b ist die Länge der longitudinalen Halbachse der Ellipse.
Parametrische Gleichungsmethode
Diese Methode verwendet die parametrische Gleichung der Ellipse, um die Ellipse zu zeichnen

Code kopieren

Der Code lautet wie folgt:

//----------Verwenden Sie parametrische Gleichungen, um Ellipsen zu zeichnen---------- ------ -----
//Die Parameter x und y der Funktion sind der Mittelpunkt der Ellipse; a, b sind die transversale Halbachse und die Länge der vertikalen Halbachse von die Ellipse, die nicht gleichzeitig 0 sein kann
//Dies Der Nachteil der Methode besteht darin, dass, wenn linWidth breiter und die Ellipse flacher ist
//Das lange Achsenende innerhalb der Ellipse ist schärfer, nicht glatt und die Effizienz ist gering
function ParamEllipse(context, x, y, a, b)
{
//max ist gleich 1 geteilt durch den größeren der Hauptachsenwerte a und b
//i erhöht sich bei jeder Schleife um 1/max, was eine Erhöhung in Grad anzeigt
//Das funktioniert. Stellen Sie sicher, dass der in jedem Zyklus gezeichnete Pfad (Bogen) nahe bei 1 Pixel liegt
var step = (a > ; b) ? 1 / a : 1 / b;
context.beginPath();
moveTo(x a, y); i = 0; i < 2 * Math.PI; i = Schritt)
//Parametrische Gleichung ist x = a * cos(i), y = b * sin(i),
//Der Parameter ist i und gibt den Grad (Bogenmaß) an
context.lineTo(x a * Math.cos(i), y b * Math.sin(i)}
context.closePath( );
context.Stroke();

Gleichmäßige Komprimierungsmethode

Diese Methode verwendet das Prinzip der gleichmäßigen Komprimierung in der Mathematik einen Kreis in eine Ellipse umwandeln. Der folgende Code führt zu dem Problem der inkonsistenten Linienbreite. Siehe 5 für die Lösung.

Code kopieren

Der Code lautet wie folgt: //---- -- -----Einheitliche Komprimierungsmethode zum Zeichnen einer Ellipse-------------------- //Die Methode besteht darin, die Bogenmethode zum Zeichnen einer zu verwenden Kreis einkreisen und mit Skalierung kombinieren

//Skalieren Sie in Richtung der horizontalen oder vertikalen Achse (gleichmäßige Komprimierung)

//Der Rand der mit dieser Methode gezeichneten Ellipse ist dicker, je näher er am Ende der Längsachse liegt , und die Linienbreite am Ende der Längsachse ist der Normalwert

//Seite Je näher es an der Nebenachse liegt, desto flacher und dünner wird die Ellipse und sogar Diskontinuitäten, die das Ergebnis der Skalierung sind
//Dieser Mangel ist manchmal von Vorteil, beispielsweise wenn der dreidimensionale Effekt eines Rings (Planetenhalo) ausgedrückt wird.
//Für den Fall, dass Parameter a oder b 0 ist, ist diese Methode nicht anwendbar
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
//Wählen Sie den größeren von a und b als Radiusparameter der Bogenmethode aus
var r = (a > b) ? a : b;
var ratioX = a / r; //Skalierungsverhältnis der horizontalen Achse
var ratioY = b / r; //Skalierungsverhältnis der vertikalen Achse context.scale(ratioX, ratioY); //Skalierung (gleichmäßige Komprimierung)
context.beginPath();
// Zeichnen Sie gegen den Uhrzeigersinn, beginnend vom linken Endpunkt der Ellipse
context.moveTo((x a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, 0, 2 * Math. PI); );
context.restore();

Kubische Bezier-Kurve-Methode 1

Die kubische Bezier-Kurve ist eine tatsächliche Näherung Zeichnung, und es ist auch eine Annäherung in der Theorie. Aufgrund seiner hohen Effizienz wird es jedoch häufig zum Zeichnen von Ellipsen in Computervektorgrafiken verwendet, aber die spezifische Theorie ist mir nicht ganz klar. Der Grad der Annäherung liegt in der Wahl der Positionen der beiden Kontrollpunkte. Die Kontrollpunktposition dieser Methode wurde durch meine eigenen Experimente ermittelt und die Genauigkeit ist in Ordnung

Kopieren Sie den Code
Der Code lautet wie folgt:

//---------Verwenden Sie die kubische Bezier-Kurve, um eine Ellipse zu simulieren 1---------------- -----

//Diese Methode erzeugt auch das Phänomen, dass, wenn die Linienbreite breiter und die Ellipse flacher ist, //das Ende der Längsachse schärfer und nicht glatt ist function BezierEllipse1(context , x, y, a, b ) { //Der Schlüssel ist die Einstellung der beiden Kontrollpunkte in bezierCurveTo

//0,5 und 0,6 sind die beiden Schlüsselkoeffizienten (erhalten aus Experimenten in dieser Funktion). )

var ox = 0.5 * a,

oy = 0.6 * b;
context.translate(x, y);
context.beginPath();
//Von der Ellipsenvertikale aus beginnt das untere Ende der Achse gegen den Uhrzeigersinn zu zeichnen
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.close();
context.restore(); };

Kubische Bezier-Kurven-Methode 2
Diese Methode wurde von einer Antwort auf einen Beitrag in StackOverFlow geändert. Sie hat eine höhere Genauigkeit und ist auch eine Methode, die häufig zum Zeichnen von Ellipsen verwendet wird >

Code kopierenDer Code lautet wie folgt:

//--------- Verwenden Sie eine kubische Bezier-Kurve, um Ellipse 2 zu simulieren -------

//Diese Methode wird auch erzeugt, wenn die Linienbreite breiter und die Ellipse flacher ist
//, das Ende der Längsachse ist scharf und nicht glatt
//Diese Methode ist genauer als die vorherige Bezier-Methode, aber etwas weniger effizient
function BezierEllipse2(ctx, x, y, a, b)
{
var k = .5522848,
ox = a * k, // Horizontaler Kontrollpunktversatz
oy = b * k; // Vertikaler Kontrollpunktversatz Quantity
ctx.beginPath( );
//Zeichne vier kubische Bezier-Kurven im Uhrzeigersinn, beginnend vom linken Endpunkt der Ellipse
ctx.moveTo(x - a, y); 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();
};

Rastermethode

Diese Methode kann Pixel gemäß den Canvas-Funktionen verarbeiten und dabei grundlegende Algorithmen zum Zeichnen verwenden Ellipsen. Zum Beispiel der Mittelpunkt-Ellipsen-Zeichnungsalgorithmus usw.
Ein Beispiel ist ein Blogbeitrag von Gartenfreund „Doudou Gou“ „HTML5 Canvas Improvement Class (1) – Raster Graphics (1) Midpoint Circle Drawing Algorithm“. Diese Methode ist relativ „originell“, bietet große Flexibilität, hohe Effizienz und hohe Genauigkeit, ist jedoch relativ kompliziert, um eine wertvolle Funktion zum Zeichnen von Ellipsen zu implementieren. Wenn sich beispielsweise die Linienbreite ändert, wird der Algorithmus komplizierter. Obwohl es sich um einen Algorithmus zum Zeichnen von Kreisen handelt, ähnelt ihm der Algorithmus zum Zeichnen von Ellipsen. Sie können ihn unten nachschlagen. Demo Im Folgenden finden Sie mehrere Demonstrationen zum Zeichnen elliptischer Funktionen zusätzlich zur Rastermethode. Der Demonstrationscode lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

;button onclick="execDraw(); " type="button">Execute >

Beachten Sie, dass für die erfolgreiche Ausführung des Codes ein Browser erforderlich ist, der HTML5 Canvas unterstützt.
Das erste Mal einen Blog zu schreiben hat einen ganzen Tag gedauert, es war nicht einfach! Die dunkle Skin-Vorlage von Blog Park wird für den eingefügten Code nicht gut angezeigt. Ich habe mir große Mühe gegeben, das Codeformat herauszufinden!