Conseils pour dessiner des ellipses dans un canevas HTML5 et conserver l'épaisseur de ligne uniforme_html5

Dessiner des ellipses dans Canvas est une exigence très courante. Le projet relativement nouveau HTML Canvas 2D Context W3C a ajouté la méthode ellipse pour dessiner des ellipses. Cependant, la plupart des navigateurs n'ont pas encore implémenté cette méthode, vous devez donc utiliser arc ou arcTo. . La méthode combine la déformation de l'échelle pour dessiner des ellipses.

Exemple de code :

Copier le code

Le code est le suivant :

<script> <br>var ctx = documentquerySelector('canvas')getContext('2d'); = "10"; <br>ctxscale(1,2); <br>ctxarc(150,150,100,0,MathPI*2,false); <br>ctxstroke(); 🎜><br> <br><br> Quelque chose ne va pas car l'épaisseur du trait est inégale et le trait est également affecté par l'échelle. </div>Pour résoudre ce problème, vous avez besoin d'une petite astuce. <img alt="" src="http://files.jb51.net/file_images/article/201303/2013032515162328.jpg">Exemple de code : <br><p></p> <p><br><br>Copier le code </p> <div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode43'));">Le code est le suivant : <u></u></span> [code] </div><canvas width="400" height="300"></canvas> </div><script> var ctx = documentquerySelector('canvas')getContext('2d' ); <div class="msgborder" id="phpcode43">ctxlineWidth = "10"; <br>ctxsave(); <br>ctxrestore(); ; <br>ctxstroke(); <br></script>


[/code]


Maintenant, c’est uniforme et parfait.
L'astuce consiste d'abord à enregistrer l'état du canevas, puis à zoomer et à appeler la commande path, puis à restaurer pour restaurer l'état du canevas, puis à le dessiner.

Le point clé est d'enregistrer d'abord, puis de mettre à l'échelle, et de restaurer d'abord, puis de caresser.