Menggunakan laluan untuk melukis lengkung Bezier tertib kedua dan ketiga dalam teknik tutorial HTML5 Canvas_html5

Dalam Kanvas HTML5, anda boleh menggunakan kaedah berikut untuk melukis lengkung Bezier tertib ketiga dan kedua:

Salin kod

Kod tersebut adalah seperti berikut:

context.bezierCurveTo(cp1x, cp1y, cp2x , cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

Lengkung Bezier ialah lengkung yang ditakrifkan pada satah dua dimensi dengan "titik mula", "titik penamat" dan satu atau lebih "titik kawalan". Keluk Bezier tertib ketiga biasa menggunakan dua titik kawalan, manakala keluk tertib kedua hanya menggunakan satu titik kawalan.

Untuk melukis lengkung Bezier tertib kedua, cuma tetapkan koordinat titik akhir dan koordinat titik kawalan:

Salin kod

Kod tersebut adalah seperti berikut:

context.moveTo(0, 0);
context.quadraticCurveTo(100,25,0,50);

Hasil pelaksanaan kod adalah seperti berikut:

Lengkung dalam contoh di atas bermula dari koordinat (0,0) dan berakhir pada (0,50), dan koordinat titik kawalan yang digunakan untuk mengawal lukisan lengkung ialah (100,25).

Berbanding dengan lengkung tertib kedua, lukisan lengkung Bezier tertib ketiga adalah lebih fleksibel kerana dua titik kawalan boleh ditetapkan. Kod berikut melukis lengkung berbentuk "S":

Salin kod

Kodnya adalah seperti berikut:

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

Nota Terjemahan 1: Mengenai lengkung Bezier, anda boleh merujuk kepada entri di Wikipedia (http://en.wikipedia.org/wiki/Bézier_curve) Animasi di dalamnya menerangkan dengan baik mekanisme penjanaan lengkung Bezier.

Anotasi 2: Pada masa ini, HTML5 Canvas hanya menyokong sehingga keluk Bezier tertib ketiga dan lengkung di atas tertib keempat belum lagi disokong.