Komentar: Menggambar Ellips di Canvas adalah persyaratan yang sangat umum, tetapi sebagian besar browser belum menerapkan metode ini, sehingga mereka sering menggunakan metode ARC atau ARCTO untuk menggabungkan deformasi skala untuk menggambar Ellips. Teman yang tertarik dapat mempelajarinya, berharap ini dapat membantu Anda.
Menggambar Ellips di Kanvas adalah persyaratan yang sangat umum. HTML Canvas 2D ContextW3C Draft baru telah menambahkan metode elips untuk menggambar elip, tetapi sebagian besar browser belum mengimplementasikan metode ini, sehingga perlu menggunakan metode ARC atau ARCTO yang dikombinasikan dengan deformasi skala untuk menggambar ellip.
Kode contoh:
<Canvas> </an Canvas>
<script>
var ctx = DocumentQuerySelector ('Canvas') getContext ('2d');
ctxlinewidth = "10";
CTXScale (1,2);
CTXARC (150.150.100,0, Mathpi*2, false);
ctxstroke ();
</script>
Agak salah, karena garis -garisnya tidak rata, dan stroke juga dipengaruhi oleh skala.
Untuk memperbaiki masalah ini, kita perlu sedikit trik.
Kode contoh:
[kode]
<Canvas> </an 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>
[/kode]
Sekarang bahkan, sempurna.
Triknya adalah untuk menyimpan keadaan kanvas terlebih dahulu, lalu skala dan panggil perintah path, lalu kembalikan keadaan kanvas, dan kemudian tarik keluar.
Poin kuncinya adalah menyimpan terlebih dahulu dan kemudian memperbesar, pulih dulu dan kemudian stroke.