Kommentar: Das Zeichnen von Ellips in Leinwand ist eine sehr häufige Voraussetzung, aber die meisten Browser haben diese Methode noch nicht implementiert, daher verwenden sie häufig die ARC- oder ARCTO -Methode, um die Skalenverformung zum Zeichnen von Ellips zu kombinieren. Interessierte Freunde können darüber lernen und hoffen, dass es Ihnen helfen kann.
Das Zeichnen von Ellips in Leinwand ist eine sehr häufige Anforderung. Der neue HTML Canvas 2D ContextW3C -Entwurf hat eine Ellipse -Methode zum Zeichnen von Ellips hinzugefügt. Die meisten Browser haben diese Methode jedoch noch nicht implementiert. Daher ist es erforderlich, die ARC- oder ARCTO -Methode in Kombination mit Skalierungsdeformation zum Zeichnen von Ellips zu verwenden.
Beispielcode:
<Canvas> </canvas>
<Script>
var ctx = documentQuerySelector ('canvas') getContext ('2d');
ctxLineWidth = "10";
ctxScale (1,2);
CTXARC (150.150,100,0, Mathpi*2, False);
ctxstroke ();
</script>
Es ist ein bisschen falsch, da die Linien in der Dicke ungleichmäßig sind und der Schlag auch von der Skala beeinflusst wird.
Um dieses Problem zu beheben, brauchen wir einen kleinen Trick.
Beispielcode:
[Code]
<Canvas> </canvas>
<Script>
var ctx = documentQuerySelector ('canvas') getContext ('2d');
ctxLineWidth = "10";
ctxsave ();
ctxScale (1,2);
CTXARC (150.150,100,0, Mathpi*2, False);
ctxrestore ();
ctxstroke ();
</script>
[/Code]
Jetzt sogar perfekt.
Der Trick besteht darin, zuerst den Canvas -Status zu speichern, dann skalieren und den Pfadbefehl aufzurufen, dann den Canvas -Status wiederherzustellen und dann herauszuziehen.
Der wichtigste Punkt ist, zuerst zu speichern und dann zu zoomen, zuerst wiederherzustellen und dann zu streicheln.