Bagaimana untuk melukis lengkung dalam javascript

Dengan perkembangan berterusan teknologi Internet, JavaScript telah menjadi salah satu bahasa pengaturcaraan yang paling popular. Dalam pembangunan bahagian hadapan, JavaScript membekalkan kami pelbagai alatan lukisan dan perpustakaan, membolehkan kami melakukan pelbagai operasi lukisan pada halaman web. Antaranya, melukis lengkung adalah operasi yang sangat biasa, dan JavaScript juga memberikan kami banyak fungsi dan kaedah yang berguna untuk mencapai matlamat ini. Seterusnya, mari belajar cara melukis lengkung dalam JavaScript.

1. Lengkung Bezier

Lengkung Bezier ialah salah satu cara yang paling biasa untuk melukis lengkung. Ia adalah lengkung yang disambungkan oleh satu atau lebih titik kawalan. Dalam JavaScript, kita boleh menggunakan API lukisan kanvas untuk melukis lengkung Bezier Berikut ialah contoh melukis lengkung Bezier kuadratik:

// 创建canvas元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 设置canvas的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取canvas的上下文对象
var ctx = canvas.getContext('2d');

// 设置Bezier曲线的起点和终点
var x1 = 100, y1 = 100;
var x2 = 500, y2 = 500;

// 设置Bezier曲线中间的控制点
var cx = 300, cy = 200;

// 开始绘制Bezier曲线
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.quadraticCurveTo(cx, cy, x2, y2);
ctx.stroke();

Dalam kod di atas, kita mula-mula mencipta elemen kanvas dan menetapkan lebarnya Tinggi. agar sesuai dengan saiz tetingkap penyemak imbas. Kemudian dengan mendapatkan objek konteks kanvas, kami boleh menggunakan API kanvas untuk melukis grafik yang kami perlukan. Dalam contoh ini, kami mencipta lengkung Bezier kuadratik dengan menetapkan titik permulaan dan titik akhir lengkung Bezier, serta titik kawalan di tengah.

Dalam fungsi ctx.quadraticCurveTo(cx, cy, x2, y2, pembolehubah cx dan cy mewakili koordinat titik kawalan di tengah lengkung Bezier, manakala x2 dan y2 mewakili koordinat); daripada titik akhir keluk Bezier.

Selain lengkung Bezier kuadratik, kita juga boleh menggunakan fungsi ctx.bezierCurveTo() untuk mencipta lengkung Bezier tertib lebih tinggi. Berikut ialah contoh melukis lengkung Bezier kubik:

// 创建canvas元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 设置canvas的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取canvas的上下文对象
var ctx = canvas.getContext('2d');

// 设置Bezier曲线的起点和终点
var x1 = 100, y1 = 100;
var x2 = 500, y2 = 500;

// 设置Bezier曲线中间的控制点
var cx1 = 300, cy1 = 200;
var cx2 = 400, cy2 = 400;

// 开始绘制Bezier曲线
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x2, y2);
ctx.stroke();

Dalam kod di atas, kami menggunakan fungsi ctx.bezierCurveTo() untuk mencipta lengkung Bezier kubik yang terdiri daripada empat titik. Dengan menetapkan titik kawalan yang berbeza, kita boleh mencipta pelbagai lengkung yang kompleks.

2. Lengkung spline B

Lengkung spline B juga merupakan kaedah melukis lengkung. Ia adalah lengkung yang terdiri daripada satu set titik kawalan dan fungsi asas, yang boleh menghasilkan lengkung licin. Dalam JavaScript, kami juga boleh menggunakan API lukisan kanvas untuk melukis lengkung B-spline. Berikut ialah contoh melukis lengkung B-spline kuadratik:

// 创建canvas元素
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 设置canvas的尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 获取canvas的上下文对象
var ctx = canvas.getContext('2d');

// 设置Bagaimana untuk melukis lengkung dalam javascript的起点和终点
var x0 = 0, y0 = 0;
var x3 = 500, y3 = 500;

// 设置Bagaimana untuk melukis lengkung dalam javascript的中间控制点
var c1 = {x: 200, y: 100};
var c2 = {x: 300, y: 400};

// 开始绘制Bagaimana untuk melukis lengkung dalam javascript
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, x3, y3);
ctx.stroke();

Dalam kod di atas, kami menggunakan fungsi ctx.bezierCurveTo() untuk mencipta lengkung B-spline. Ambil perhatian bahawa dalam contoh ini kita mewakili titik kawalan sebagai objek yang mengandungi koordinat x dan y.

Dengan menukar titik kawalan lengkung B-spline, kita boleh mencipta pelbagai lengkung, seperti yang ditunjukkan dalam rajah di bawah:

3. Keluk SVG

SVG (Grafik Vektor Boleh Skala) ialah format grafik vektor berasaskan XML yang boleh digunakan untuk mencipta grafik dan kesan animasi yang cantik. Dalam SVG, kita boleh menggunakan elemen Berikut ialah contoh kod SVG untuk melukis lengkung Bezier kuadratik:

<svg xmlns="http://www.w3.org/2000/svg" width="500"    style="max-width:90%">
  <path d="M 100 100 Q 300 200 500 500" fill="none" stroke="black" stroke-width="2" />
</svg>

Dalam contoh di atas, kami menggunakan elemen Dalam data laluan, "M 100 100" mewakili titik permulaan laluan, dan "Q 300 200 500 500" mewakili titik kawalan dan titik akhir lengkung Bezier kuadratik. Antaranya, "Q" menunjukkan bahawa ini adalah lengkung Bezier kuadratik.

Dengan menukar data laluan, kita boleh mencipta pelbagai lengkung, seperti yang ditunjukkan di bawah:

Ringkasan

Itu sahaja Artikel ini memperkenalkan beberapa cara melukis lengkung dalam JavaScript. Sama ada menggunakan API lukisan kanvas JavaScript untuk melukis lengkung Bezier dan lengkung B-spline, atau menggunakan SVG untuk melukis lengkung, kami boleh mencipta pelbagai lengkung yang rumit dan cantik dengan mudah. Dengan berlatih dan mempelajari teknik lukisan ini, kami boleh membawa kesan visual yang lebih jelas dan kaya ke halaman web kami.

Atas ialah kandungan terperinci Bagaimana untuk melukis lengkung dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!