Cara melukis grafik kompleks dengan JavaScript

JavaScript ialah bahasa pengaturcaraan yang sangat berkuasa yang memainkan peranan penting dalam pembangunan web moden. Selain merealisasikan interaksi halaman web dan kesan dinamik, JavaScript juga boleh merealisasikan pelbagai grafik kompleks melalui API lukisan. Jadi, artikel ini akan berkongsi dengan anda cara melukis grafik kompleks dengan JavaScript.

Kanvas dan Konteks

Untuk melaksanakan grafik dalam Javascript, kita perlu mencipta elemen kanvas (Kanvas) dahulu dan kemudian mendapatkan konteksnya (Konteks). Kanvas ialah teg HTML5 yang membolehkan anda membuat kawasan segi empat tepat dengan keupayaan melukis pada halaman web. Tujuan mendapatkan konteks adalah untuk menggunakan API lukisan yang disediakan oleh kanvas.

Membuat elemen Kanvas adalah sangat mudah, cuma tambah kod berikut dalam HTML:

<canvas id="myCanvas">
  Your browser does not support this feature.
</canvas>

Atribut id boleh digunakan untuk mendapatkan elemen kanvas dan teks bersarang di tengah daripada label ialah Teks alternatif yang dipaparkan dalam penyemak imbas yang tidak menyokong kanvas. Seterusnya, kita boleh menggunakan JavaScript untuk mendapatkan elemen kanvas dan konteks. Kodnya adalah seperti berikut:

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

Di sini, kaedah getElementById bagi objek dokumen digunakan untuk mendapatkan elemen kanvas dengan id myCanvas, dan konteks 2D diperoleh melalui kaedah getContext. Kanvas menyokong 3 jenis konteks: 2D, WebGL dan WebGL2. Dalam artikel ini kita akan menggunakan konteks 2D.

Lukis bentuk asas

Selepas mendapatkan konteks 2D, kita boleh mula melukis. API Kanvas menyediakan satu siri kaedah untuk menerangkan bentuk asas, yang biasa digunakan ialah: tegak, lengkok, garisan, dsb.

Sebagai contoh, kita boleh melukis segi empat tepat melalui kod berikut:

ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);

Dalam kod di atas, atribut fillStyle digunakan untuk menetapkan warna isian dan kaedah fillRect digunakan untuk melukis segi empat tepat. Parameter kaedah fillRect ialah koordinat sudut kiri atas segi empat tepat (x, y), dan lebar dan tinggi segi empat tepat (lebar, tinggi).

Seterusnya, kita boleh melukis bulatan melalui kod berikut:

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#FFFF00";
ctx.fill();

Dalam kod di atas, gunakan kaedah beginPath untuk mula melukis laluan baharu, dan kaedah arka digunakan untuk lukis laluan bulat, Parameternya ialah koordinat pusat bulatan (x, y), jejari (r), sudut permulaan (startAngle) dan sudut hujung (endAngle). Oleh kerana kita ingin melukis bulatan lengkap, sudut permulaan ialah 0 dan sudut penamat ialah 2π. Akhir sekali, tetapkan warna isian kepada kuning dan gunakan kaedah isian untuk mengisi laluan.

Lukis bentuk kompleks

Selain bentuk asas, kita juga boleh menggunakan API Kanvas untuk melukis pelbagai bentuk kompleks. Ini memerlukan penggunaan objek Path2D dan lengkung Bezier.

Objek Path2D ialah struktur data yang menyimpan laluan kompleks boleh diterangkan melalui objek ini. Sebagai contoh, kod berikut melukis laluan yang terdiri daripada 3 segmen baris:

let path = new Path2D();
path.moveTo(0, 0);
path.lineTo(0, 50);
path.lineTo(50, 50);
ctx.stroke(path);

Dalam kod di atas, gunakan kaedah moveTo untuk menetapkan titik permulaan laluan kepada (0,0) dan gunakan kaedah lineTo untuk melukis 3 baris dalam urutan, dan akhirnya menggunakan kaedah strok untuk melukis laluan.

Keluk Bézier ialah fungsi matematik yang digunakan untuk menerangkan lengkung licin. API Kanvas menyediakan dua kaedah, quadraticCurveTo dan bezierCurveTo, untuk melukis lengkung Bezier kuadratik dan kubik.

Sebagai contoh, kod berikut melukis laluan lengkung Bezier padu yang terdiri daripada 3 titik:

let path = new Path2D();
path.moveTo(20, 20);
path.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke(path);

Dalam kod di atas, gunakan kaedah moveTo untuk menetapkan titik permulaan laluan ke (20 ,20), kaedah bezierCurveTo diikuti oleh tiga set parameter iaitu 2 titik kawalan dan 1 titik akhir. Menurut definisi lengkung Bezier padu, titik permulaan dan titik akhir berada pada lengkung, dan titik kawalan mempengaruhi kelengkungan lengkung.

Lukis kecerunan dan gambar

Selain bentuk, API Kanvas juga menyokong kecerunan dan lukisan gambar. Mula-mula lihat bagaimana kecerunan dilukis.

Kecerunan boleh digunakan untuk warna isian atau warna strok. API Kanvas menyokong kecerunan linear dan kecerunan jejari. Berikut ialah kod untuk mengisi segi empat tepat menggunakan kecerunan linear:

let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#00FF00');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

Dalam kod di atas, kaedah createLinearGradient digunakan untuk mencipta kecerunan linear dan parameter ialah koordinat titik permulaan (x0, y0) dan koordinat titik akhir (x1, y1). Kaedah addColorStop digunakan untuk menetapkan kedudukan dan nilai warna kecerunan, di mana parameter kedudukan ialah nilai antara 0 dan 1.

Seterusnya, mari kita lihat lukisan gambar.

API Kanvas menyokong penggunaan gambar sebagai kanvas, yang boleh mencapai kesan yang lebih kompleks. Berikut ialah kod untuk mengisi segi empat tepat dengan gambar:

let img = new Image();
img.onload = function(){
  let pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'image.png';

Dalam kod di atas, kami mula-mula mencipta objek gambar dan menetapkan acara onload untuknya. Selepas imej dimuatkan, kami menggunakan kaedah createPattern untuk mencipta corak, dan parameternya ialah objek imej dan kaedah lukisan ('ulang' bermaksud pengembangan jubin). Akhir sekali, gunakan kaedah fillRect untuk mengisi corak.

Ringkasan

Melalui pengenalan kepada API Kanvas, kita dapat mengetahui bahawa JavaScript boleh digunakan untuk melukis pelbagai grafik yang kompleks. Selain bentuk asas, pelbagai laluan kompleks boleh diterangkan melalui objek Path2D dan lengkung Bezier. Melalui kecerunan dan lukisan gambar, kita juga boleh mencapai kesan yang lebih kaya. Sudah tentu, ini hanyalah pengenalan ringkas The Canvas API kaya dengan fungsi dan mempunyai banyak kaedah aplikasi yang lebih maju, yang memerlukan kami untuk terus belajar dan berlatih.

Atas ialah kandungan terperinci Cara melukis grafik kompleks dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!