html5 Tutorial lukisan kanvas (11)—Gunakan lineTo/arc/bezierCurveTo untuk melukis kemahiran tutorial oval_html5

fungsi DrawEllipse(Kanvas,O,OA,OB){
//Lukis elips, contoh: var B=New Array(150,150); ;
dengan ( Kanvas){
var x=O[0] OA; 0;i<=360 ;i ){
var ii=i*Math.PI/180;
var x=O[0] OA*Math.cos(ii); [1]-OB* Math.sin(ii);
lineTo(x,y);
}
}
}


Prinsip kaedah ini ialah bahawa bulatan mempunyai 360 darjah, Kemudian gunakan lineTo untuk menggelung 360 kali, lukis segmen garisan untuk setiap darjah, dan akhirnya sambungkannya menjadi elips. Fungsi trigonometri sinus dan kosinus diperlukan untuk pengiraan.
Perhatikan bahawa parameter kedua kaedah ini ialah tatasusunan, iaitu koordinat tengah elips

// terjemah konteks
context.translate(canvas.width / 2, canvas.height / 2); secara mendatar
context.scale( 2, 1);
// lukis bulatan yang akan diregangkan menjadi
context.beginPath();
context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false );
// pulihkan kepada keadaan asal
context.restore()


Kaedah ini menggunakan fungsi kanvas yang tidak pernah saya bincangkan sebelum ini , iaitu skala, yang boleh melaksanakan kanvas zum. Terdapat dua arah penskalaan: mendatar dan menegak Dalam kod, kanvas dibesarkan dalam arah mendatar, tetapi arah menegak kekal tidak berubah Jadi, bulatan yang dilukis dengan lengkok menjadi elips.
Kaedah ini kelihatan sangat baik pada pandangan pertama, dengan kurang kod dan prinsipnya mudah difahami. Tetapi selepas analisis, anda boleh menemui kelemahannya yang jelas, iaitu - ketidaktepatan! Sebagai contoh, saya memerlukan elips dengan lebar 171 dan ketinggian 56. Jika kita menetapkan jejari arka kepada 28, maka kita akan tertekan oleh nombor yang menyakitkan dan tidak dapat difahami 171/28/2.

Tetapi kompromi adalah dengan sentiasa menetapkan jejari arka kepada 100, dan kemudian besarkan jika tidak mencukupi, dan kecilkan jika melebihinya. Walau bagaimanapun, ia masih tidak tepat.

3, gunakan Bezier curve bezierCurveTo

Memandangkan saya merasakan kaedah penskalaan di atas tidak tepat, saya ingin mencari kaedah yang tepat untuk melukis elips, dan akhirnya menemuinya pada stackoverflow:

ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); 🎜 >ctx.bezierCurveTo(xm lembu, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym oy, xm ox, ye, xm, ye); ( xm - ox, ye, x, ym oy, x, ym);
Kaedah ini boleh dianggap sempurna. Dia membahagikan elips kepada empat lengkung Bezier dan menyambungkannya untuk membentuk elips. Akhirnya, lebar dan tinggi adalah lebih tepat dan overhed adalah kurang.
Tetapi kaedah ini masih mempunyai kekurangan. Lihat pada parameter kappa, ia mempunyai nilai yang sangat pelik. Saya percaya ramai orang tidak faham mengapa ia perlu menjadi nilai ini sehingga pakar geometri memberitahu anda mengapa ia perlu menjadi nilai ini - saya masih tidak tahu. Dan saya mempunyai keinginan yang kuat untuk mengubahnya dan melihat apa akibatnya.

Sudah tentu, impuls saya yang serupa dengan pesakit gangguan obsesif-kompulsif tidak boleh dikatakan sebagai kelemahan kaedah ini. Saya secara peribadi merasakan bahawa elips jelas terdiri daripada dua lengkung Bezier dan bukannya empat. Idea ini akhirnya membawa saya kepada cara yang sempurna untuk melukis elips.
4, gunakan dua lengkung Bezier untuk melukis elips
Untuk memahami sama ada kaedah sebelumnya boleh dipermudahkan, saya telah mendaftarkan akaun stackoverflow untuk bertanyakan soalan soalan, saya tidak mempunyai mata yang mencukupi untuk dipindahkan, jadi saya terpaksa menggunakan bahasa Inggeris saya yang hampir tidak mencukupi untuk menjawab soalan daripada orang asing untuk mendapatkan mata. Tetapi nasib akhirnya datang dan masalah mata saya diselesaikan dengan menjawab soalan.
Soalan yang saya tanya tentang hubungan antara lengkung Bezier dan elips ada di sini
Sejujurnya, saya tidak faham kebanyakan jawapan orang asing di bawah, tetapi mujurlah dia menyediakan halaman contoh kod, yang membuatkan saya faham. . Prinsip, saya ingin mengucapkan terima kasih kepada beliau sekali lagi. Mengikut jawapan beliau, kaedah yang saya dapati untuk melukis elips adalah seperti berikut:

Jika anda menemui kaedah yang lebih mudah, sila kongsikan dengan kami untuk perbincangan.