4 Möglichkeiten zum Zeichnen von Ellipsen in HTML5 Canvas_html5 Tutorial-Tipps

Ü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:

1.context ist das 2D-Zeichenumgebungsobjekt von Canvas,
2.x ist die Abszisse des Ellipsenzentrums,
3.y ist die Ordinate des Ellipsenzentrums,
4.a ist die Länge der Querhalbachse der Ellipse,
5.b ist die Länge der Längshalbachse der Ellipse.

Parametrische Gleichungsmethode

Diese Methode verwendet die parametrische Gleichung der Ellipse, um die Ellipse zu zeichnen

Kopieren Sie den Code

Der Code ist wie folgt folgt:

//----------Verwenden Sie parametrische Gleichungen, um Ellipsen zu zeichnen---------------------
//Funktionsparameter x und y sind der Mittelpunkt der Ellipse; a und b sind die horizontale bzw. vertikale Halbachse der Ellipse
//Die Länge der vertikalen Halbachse darf nicht 0 sein gleichzeitig.
//Der Nachteil dieser Methode besteht darin, dass die Ellipse kleiner wird, wenn sie flach ist.
//Das Ende der Längsachse innerhalb der Ellipse ist schärfer, nicht glatt und weniger effizient
function ParamEllipse(context, x, y, a, b)
{
//max ist gleich 1 Division durch den größeren der Hauptachsenwerte a und b
//i erhöht sich bei jedem Zyklus um 1/max, was eine Gradzunahme anzeigt
//Dadurch kann der in jedem Zyklus gezeichnete Pfad (Bogen) nahe an 1 Pixel liegen
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x a, y); //Von der Ellipse Beginnen Sie mit dem Zeichnen vom linken Endpunkt
for (var i = 0; i < 2 * Math.PI; i = Schritt)
{
//Die parametrische Gleichung ist x = a * cos(i), y = b * sin(i),
//Der Parameter ist i , Angabe des Grads (Bogenmaß)
context.lineTo(x a * Math.cos(i), y b * Math.sin(i));
}
context.closePath();
context .Stroke();
};

Einheitliche Komprimierungsmethode

Diese Methode nutzt das Prinzip der gleichmäßigen Komprimierung in der Mathematik, um einen Kreis gleichmäßig in eine Ellipse zu komprimieren. Der folgende Code führt zu inkonsistenten Linienbreiten. Die Lösung finden Sie im Kommentar von Simonleung Boden. .

Code kopieren

Der Code lautet wie folgt:

//------------Gleichmäßige Komprimierungsmethode zum Zeichnen von Ellipsen--------------------
//The Methode Die Bogenmethode wird zum Zeichnen eines Kreises verwendet, kombiniert mit einer Skalierung für
//Skalierung in horizontaler oder vertikaler Achsenrichtung (gleichmäßige Komprimierung)
//Die Kante der mit dieser Methode gezeichneten Ellipse ist dicker als sie liegt näher am Ende der Längsachse und die Linienbreite des Endpunkts an der längeren Achse ist der Normalwert
//Je näher die Kante an der Nebenachse liegt, desto flacher und dünner wird die Ellipse und gleichmäßiger Dies ist das Ergebnis der Skalierung
//Dieser Mangel ist manchmal von Vorteil, z. B. wenn der dreidimensionale Effekt des Rings (Planetenhalo) ausgedrückt wird
//Für den Fall, dass der Parameter a oder b ist 0, diese Methode ist nicht anwendbar
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
//Wählen Sie den größeren von a und aus b als Radiusparameter der Bogenmethode
var r = (a > b) ? r; //Skalierungsverhältnis der vertikalen Achse
context.scale(ratioX, ratioY); //Skalierung (gleichmäßige Komprimierung)
context.beginPath();
//Zeichne gegen den Uhrzeigersinn vom linken Endpunkt der Ellipse
context.moveTo((x a) / ratioX, y / ratioY);
context.arc(x / ratioX , y / ratioY, r, 0, 2 * Math.PI);
context.closePath ();
context.Stroke();
context.restore();
};

Kubische Bezierkurvenmethode 1

Das Zeichnen einer Ellipse mit einer kubischen Bezier-Kurve ist eine Annäherung beim tatsächlichen Zeichnen und 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 Kontrollpunktpositionen dieser Methode wurden 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 Ellipse 1 zu simulieren----------
//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.save();
context.translate(x, y);
context.beginPath();
//Zeichne gegen den Uhrzeigersinn, beginnend am unteren Ende der vertikalen Achse der 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();

};

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.

der Code

Der Code lautet wie folgt:

//---------Verwenden Sie die kubische Bezier-Kurve, um Ellipse 2 zu simulieren----- -- ----------------
//Diese Methode erzeugt auch das Phänomen, dass, wenn die Linienbreite breiter und die Ellipse flacher ist
// die lange Achse Ende ist schärfer 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

ctx.beginPath();
//Zeichne vier kubische Bezier-Kurven im Uhrzeigersinn, beginnend vom linken Endpunkt der 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();
};

Rastermethode

Diese Methode kann grundlegende Algorithmen in Grafiken verwenden, um Ellipsen basierend auf den Eigenschaften von Canvas zu zeichnen, die Pixel bedienen können. 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.

Zusammenfassung

Grundsätzlich können nicht alle Methoden eine 100%ige Genauigkeit erreichen, da sie durch die Bildschirmauflösung begrenzt sind.

Tatsächlich sollte die beste Methode arc() scale() sein. Die Canvas-Zeichenbibliothek KineticJS verwendet diese Methode.

In anderen Zeichenprogrammen gibt es keine inhärente arc()-scale()-Methode wie HTML5-Canvas. Unabhängig davon, wie viele Bezier-Kurven es gibt, handelt es sich nur um Annäherungen. Informationen zur Verwendung von Bezier-Kurven zur Simulation von Ellipsen finden Sie in den folgenden Informationen: Zeichnen eines elliptischen Bogens mithilfe von Polylinien, quadratischen oder kubischen Bezier-Kurven.

Da arc() scale() eine bereits vom Browser implementierte Methode ist, weist sie die höchste theoretische Genauigkeit auf und ist daher die beste in Bezug auf Effizienz, Genauigkeit und Benutzerfreundlichkeit.

Nachdem die Ellipse mit arc() scale() gezeichnet wurde, werden die beiden Methoden context.Stroke() und context.restore() in einer anderen Reihenfolge aufgerufen, und die Ergebnisse werden sehr interessant sein. Normalerweise sollten Sie zuerst „restore()“ und dann „Stroke()“ verwenden.

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:

执行
清理

注意,要成功运行代码,需要支持HTML5的Canvas的浏览器.