html5 Tutorial lukisan kanvas (8)—kaedah bezierCurveTo untuk melukis lengkung dalam kemahiran tutorial canvas_html5

Dalam artikel sebelum ini, saya telah bercakap tentang tiga kaedah melukis lengkung dalam kanvas: arka, arcTo dan quadraticCurveTo Mereka semua mempunyai satu persamaan, iaitu ialah, mereka Lengkung yang anda lukis hanya boleh pergi ke satu sisi Perbezaan terbesar antara bezierCurveTo yang kita bincangkan hari ini dan mereka ialah ia mempunyai dua titik kawalan, yang bermaksud anda boleh melukis lengkung berbentuk S.

bezierCurveTo, juga dikenali sebagai Bezier curve, jika anda telah mempelajari alatan lukisan tertentu, anda boleh memahaminya dengan segera.
Sintaks bezierCurveTo adalah seperti berikut:
ctx.bezierCurveTo(x1,y1,x2,y2,x,y); ialah Koordinat titik kawalan 1, (x2, y2) ialah koordinat titik kawalan 2, dan (x, y) ialah koordinat titik akhirnya. Seperti quadraticCurveTo, koordinat titik permulaannya juga dipratetap oleh moveTo.

Jadi, bezierCurveTo memerlukan 4 mata untuk melukis lengkung: titik permulaan, titik akhir, titik kawalan 1, titik kawalan 2. Untuk tujuan penjelasan seterusnya, di sini saya menganggap titik kawalan 1 sepadan dengan titik permulaan , dan titik kawalan 2 sepadan dengan titik akhir
Di sini kita perlu menyebut semula masalah lama lukisan kanvas, iaitu lukisan kod semuanya berdasarkan tekaan, dan anda perlu menyegarkan semula untuk mengetahui di mana hendak melukis.

Saya akan meneruskan tradisi yang baik dari sebelumnya dan melukis beberapa baris tambahan untuk membantu semua orang memahami:

Salin kod

Kodnya adalah seperti berikut:

var x1=450, //x koordinat titik kawalan 1
y1 = 300, //y titik kawalan 1
x2 = 450, // x daripada titik kawalan 2
y2 = 500, // y daripada titik kawalan 2
x = 300, // titik akhir x
y = 500; // titik akhir y
ctx.moveTo(300,300) ;//Titik permulaan
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0,0,0,1)"
ctx.moveTo(300,300) ;
ctx.bezierCurveTo(x1,y1,x2,y2,x,y); .beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1; ctx.moveTo(300,300);
ctx.lineTo(x1,y1); (x,y);
// Sambungkan titik permulaan dan titik akhir (garis dasar)
ctx.moveTo(300,300); );






Di sini kita mula-mula melukis lengkung yang serupa dengan quadraticCurveTo, hanya condong ke sebelah. Garis ini kelihatan "licin" kerana koordinat x bagi titik kawalan 1 dan 2 adalah sama.
Sekarang lukis satu lagi lengkung berbentuk S untuk membuktikan bahawa bezierCurveTo adalah berbeza:

Salin kod

Kod Seperti berikut:


var x1 = 150;

...

Malah, cuma tukar koordinat titik kawalan 1. Jika koordinat titik kawalan 1 dan titik kawalan 2 berada pada kedua-dua belah garis dasar, lengkung berbentuk S akan dilukis jika kedua-duanya berada pada satu sisi garis dasar, ia akan mempunyai kesan yang serupa dengan kuadratikCurveTo.

Situasi dalam contoh ini agak mudah Garis dasar (dari titik permulaan ke titik akhir) adalah menegak Walau bagaimanapun, dalam aplikasi praktikal, kebanyakan masa garis dasar kami adalah condong, dan keadaannya lebih rumit. . Tetapi cuba sendiri

Setiap kaedah lukisan nampaknya mempunyai fungsi yang agak tunggal, tetapi kaedah berkuasa adalah gabungan kaedah individu. Dalam artikel seterusnya, saya akan cuba menerangkan cara melukis beberapa grafik konvensional, seperti segi empat tepat bulat dan elips Ia memerlukan gabungan kaedah tunggal sebelumnya.