Tipps zum Zeichnen von Ellipsen im HTML5-Canvas und zum Beibehalten einer einheitlichen Linienstärke._HTML5-Tutorial-Tipps

Das Zeichnen von Ellipsen in Canvas ist eine sehr häufige Anforderung. Der relativ neue HTML Canvas 2D Context W3C-Entwurf hat die Ellipsenmethode zum Zeichnen von Ellipsen hinzugefügt, daher müssen Sie arc oder arcTo verwenden . Methode kombiniert Maßstabsverformung, um Ellipsen zu zeichnen.

Beispielcode:

Code kopieren

Der Code lautet wie folgt:

<script> = "10 "; <br>ctxscale(1,2); <br>ctxarc(150,150,100,0,MathPI*2,false); <br></script>

Etwas stimmt nicht, weil die Linienstärke ungleichmäßig ist und auch der Strich durch die Skalierung beeinflusst wird. Um dieses Problem zu beheben, benötigen Sie einen kleinen Trick.
Beispielcode:

Code kopieren

Der Code lautet wie folgt:

[code]

<script> ); <br>ctxlineWidth = "10"; <br>ctxscale(1,2); <br>ctxrestore() ; <br>ctxStroke(); <br></script>

Jetzt ist es gleichmäßig und perfekt.
Der Trick besteht darin, zuerst den Leinwandstatus zu speichern, dann zu zoomen und den Pfadbefehl aufzurufen, dann wiederherzustellen, um den Leinwandstatus wiederherzustellen, und dann zu streichen, um ihn zu zeichnen.

Der entscheidende Punkt ist, zuerst zu speichern und dann zu skalieren und zuerst wiederherzustellen und dann zu streichen.