html5 Tutorial lukisan kanvas (7)—kaedah kuadratikCurveTo untuk melukis lengkung dalam kemahiran tutorial canvas

html5 Tutorial lukisan kanvas (7)—kaedah kuadratikCurveTo untuk melukis lengkung dalam kemahiran tutorial canvas_html5

WBOY

Lepaskan： 2016-05-16 15:50:11

asal

1485 orang telah melayarinya

Terus bercakap tentang kaedah melukis lengkung dalam kanvas, hari ini kita akan bercakap tentang quadraticCurveTo.
Sejujurnya, kaedah ini agak menakutkan anda boleh mengalaminya buat kali pertama hanya dari nama fungsi. By the way, saya rasa perlu untuk memendekkan nama fungsi ini.
Kuadratik bermaksud kuadratik, iaitu darjah kuadratik bagi persamaan kuadratik dalam matematik. Parameter ctx.quadraticCurveTo adalah seperti berikut:

Salin kod

Kod adalah seperti berikut:

ctx .quadraticCurveTo(x1,y1,x,y); titik? apa? Anda bertanya kepada saya di mana titik permulaan? Titik permulaan ditentukan sebelum ini menggunakan moveTo.
Sebab mengapa saya meletakkan koordinat titik kawalan dengan nombor siri 1 adalah kerana fungsi untuk melukis lengkung yang disebut kemudian mempunyai dua titik kawalan, iaitu x2 dan y2, jadi di sini adalah pukulan berjaga-jaga.

Titik permulaan yang ditentukan oleh moveTo dan titik akhir yang ditentukan oleh quadraticCurveTo sendiri boleh disambungkan ke dalam garis lurus Memandangkan quadraticCurveTo hanya mempunyai satu titik kawalan, titik kawalan ini sama ada di sebelah kiri garis lurus atau di sebelah kanan. sisi garis lurus Oleh itu, quadraticCurveTo hanya boleh melukis Garisan lengkok, masih tidak boleh melukis bentuk S.

Untuk memudahkan pemahaman, saya masih menggunakan kaedah melukis garisan bantu dalam artikel sebelum ini. Kod awal adalah seperti berikut:

Salin kod

Kod tersebut adalah seperti berikut:

var x1=350,

y1 = 250,

x = 400,
y = 500; >ctx.moveTo(300,300 ); //Titik permulaan
ctx.quadraticCurveTo(x1,y1,x,y); //Keluk sebenar
ctx.stroke();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300); ialah garisan untuk melukis titik kawalan
ctx.lineTo(x,y); y);
ctx.stroke();
Di sini saya melukis dua garis bantu, satu ialah garis sambungan antara titik permulaan dan titik akhir, dan satu lagi ialah garis bantu dari titik permulaan ke titik kawalan dan kemudian ke titik akhir (sebenarnya dua). Persilangan kedua-dua garis ini ialah koordinat titik QuadraticCurveTo Control.

quadraticCurveTo hanya boleh melukis lengkung berbentuk arka, tetapi arka ini boleh menjadi sangat tidak teratur, iaitu peningkatan berbanding arka dan arcTo.
Selain itu, quadraticCurveTo tidak akan diterbalikkan seperti arcTo.
Sudah tentu, jika anda mengalihkan titik kawalan jauh, grafik mungkin menjadi asing kepada anda. Mari cuba:
“y1 = 950;
” Saya hanya menukar y1 sedikit lebih besar, dan kemudian lengkungan melepasi skop kanvas.

Namun, julat lengkung yang dilukis oleh quadraticCurveTo tidak boleh mencapai atau melebihi koordinat titik kawalan Selagi kita "mengawal" titik kawalan, kita tidak perlu risau.
Saya menulis halaman contoh mudah alih untuk menunjukkan proses melukis lengkung dengan quadraticCurveTo Saya harap ia dapat membantu anda mendalami pemahaman anda:

<!DOCTYPE HTML>
<html lang="en-US">
<kepala>
 <meta charset="UTF-8">
 <tajuk>Pembelajaran kanvas--quadraticCurveTo draw curve</title>
 <style type="text/css">
 kanvas {bayang-kotak: 0 0 10px rgba(0,0,0,0.2) }
 </style>
</head>
<badan>
 <canvas id="cvs" width="800" height="600">canvas tidak disokong</canvas>
</badan>
<script type="text/javascript">
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
//ctx.closePath();
var x1=350,
 y1 = 250,
 x2 = 440,
 y2 = 550,
 x = 400,
 y = 500;
var kipas = 1, kipas1 = 1;
cabutan fungsi () {
 ctx.clearRect(100,100,600,600);
 ctx.beginPath();
 ctx.strokeStyle="#000";
 ctx.moveTo(300,300);
 ctx.quadraticCurveTo(x1,y1,x,y);
 ctx.stroke();
 /*ctx.beginPath();
 ctx.strokeStyle = "rgba(0,255,0,1)"
 ctx.moveTo(300,300);
 ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
 ctx.stroke();*/
 ctx.beginPath();
 ctx.strokeStyle = "rgba(255,0,0,0.5)";
 ctx.moveTo(300,300);
 ctx.lineTo(x1,y1);
 //ctx.lineTo(x2,y2);
 ctx.lineTo(x,y);
 ctx.moveTo(300,300);
 ctx.lineTo(x,y);
 /*ctx.moveTo(x2,y2);
 ctx.lineTo(x,y);*/
 ctx.stroke();
 jika(x1 > 600) {
  kipas = -1;
 } lain jika (x1 < 200) {
  kipas = 1;
 }
 jika(y1 > 700) {
  kipas1 = -1;
 } lain jika (y1 < 200) {
  kipas1 = 1;
 }
 x1 = kipas;
 y1 = kipas1;
 setTimeout(draw,22);
}
lukis();
//ctx.strokeRect(100,100,50,50);
</skrip>
</html>

Petua: Anda boleh mengubah suai sebahagian daripada kod sebelum menjalankan
Harap maafkan saya jika kod itu hodoh.