Heim > Web-Frontend > H5-Tutorial > Tipps zum Zeichnen von Ellipsen im HTML5-Canvas und zum Beibehalten einer einheitlichen Linienstärke._HTML5-Tutorial-Tipps

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

WBOY
Freigeben: 2016-05-16 15:49:54
Original
1427 Leute haben es durchsucht

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.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage