Metode implementasi bagaimana kanvas menggambar segmen garis

Untuk mempelajari kanvas, Anda harus mengetahui cara menggambar segmen garis terlebih dahulu, lalu Anda dapat menggunakan banyak segmen garis sederhana untuk mewujudkan grafik yang lebih kompleks. Misalnya, diagram umum, diagram batang, diagram garis, dll., semuanya diwujudkan melalui segmen garis.

Pengetahuan dasar tentang kanvas tidak banyak. Saya terutama tahu cara menggambar segmen garis, grafik, gambar, teks, dll. Kanvas dapat digambar di browser, atau gambar sederhana dapat digambar di server node dengan bantuan node-kanvas. Artikel ini hanya mencatat gambar di browser. Adapun cara menggambar di sisi node, Anda dapat memeriksa sendiri informasi yang relevan.

Untuk menggambar di browser, pertama-tama tentukan elemen kanvas dalam HTML. Lebar dan tinggi default adalah 300 * 150, yang dapat diatur berdasarkan width dan height . Perhatikan bahwa lebar dan tinggi gaya elemen kanvas serta lebar dan tinggi kanvas gambar kanvas bukanlah hal yang sama.

 <canvas id=canvas> <p>Browser saat ini tidak mendukung kanvas, harap tingkatkan versi browser Anda</p></canvas>

Sebelum menggambar, pertama-tama kita harus mendapatkan konteks gambar 2D dari kanvas saat ini, dan selanjutnya menggambar dengan mengoperasikan konteksnya.

 let canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('can not find canvas element');}// Catatan 2d. Parameternya harus huruf kecil; ke webgl, Anda bisa mendapatkan konteks gambar 3d let ctx = canvas.getContext('2d');

Catatan: Cuplikan kode di atas akan diabaikan pada contoh berikutnya, dan variabel ctx akan digunakan secara langsung untuk mewakili konteks gambar 2D kanvas.

Mari kita lihat sistem koordinat pada gambar kanvas 2D. Sudut kiri atas elemen kanvas saat ini adalah titik asal koordinat (0,0), arah horizontal ke kanan adalah arah positif sumbu X, dan arah positif sumbu X. arah vertikal ke bawah adalah arah positif sumbu Y, seperti gambar di bawah ini. Anda dapat mengoperasikan sistem koordinat melalui terjemahan, rotasi, dan skala untuk mencapai beberapa animasi. Bagian ini akan dijelaskan secara rinci di bagian pengetahuan animasi.

Saat menggambar ruas garis sederhana, biasanya Anda mengatur gaya ruas garis terlebih dahulu, seperti warna, lebar garis, gaya titik akhir garis, dll. Kita menyetel gaya gambar global ctx dengan menyetel strokeStyle , yang dapat berupa rgba atau heksadesimal legal warna.nilai, atau objek gradien, dll. Kode berikut cukup menggambar ruas garis merah dengan lebar 10 dari (10,10) hingga (50,60).

 ctx.strokeStyle = 'merah';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.stroke();

Pertama mari kita lihat metode dan properti yang terkait dengan menggambar segmen garis.

Properti terkait:

• lineCap, nilai ini memberi tahu browser cara menggambar titik akhir segmen garis. Nilai opsionalnya adalah salah satu dari tiga nilai berikut: pantat, bulat, persegi. Standarnya adalah pantat.
• lineWidth, nilai ini menentukan lebar piksel segmen garis. Harus non-negatif, tidak terbatas, defaultnya adalah 1.0.
• lineJoin menentukan cara menggambar fokus ketika dua ruas garis berpotongan. Ini hanya akan berlaku jika kedua ruas garis tersebut mempunyai arah yang berbeda. Nilai yang mungkin: miring, bulat, mitra. Nilai defaultnya adalah mitra.
• miterLimit, memberi tahu browser cara menggambar fokus segmen garis dalam bentuk miter. Ini hanya valid jika lineJoin='miter', dan defaultnya adalah 10.0.
• lineDashOffset, menyetel offset tanda hubung, defaultnya adalah 0,0.

Metode terkait:

• BeginPath menghapus semua subjalur di jalur saat ini untuk mengatur ulang jalur saat ini. Umumnya harus dipanggil terlebih dahulu ketika menggambar bentuk tertutup.
• closePath, menampilkan jalur tertutup. Metode ini digunakan untuk jalur busur tertutup dan jalur terbuka yang dibuat dari kurva atau ruas garis.
• moveTo, memindahkan titik gambar saat ini ke koordinat yang ditentukan.
• lineTo menggambar ruas garis dari titik sebelumnya ke titik koordinat yang ditentukan.
• setLineDash, metode yang digunakan untuk mengatur garis putus-putus. Parameternya adalah array yang menunjukkan panjang garis padat yang ditarik dan panjang jarak antar garis padat.

Coba atur nilai lineCap yang berbeda untuk menggambar segmen garis yang sama

 ctx.lineWidth = 10;ctx.textAlign = 'center';biarkan warna = ['merah', 'hijau', 'biru'];biarkan lineCaps = ['pantat', 'bulat', 'persegi'];untuk ( let [index, lc] of lineCaps.entries()) { ctx.strokeStyle = warna[index]; //Mengatur warna segmen garis ctx.lineCap = lc; //Set lineCap ctx.beginPath(); // Hapus jalur saat ini ctx.moveTo(10, 20 + 20 * indeks); ctx.lineTo(50, 20 + 20 * indeks); 80 , 25 + 20 * indeks);}

Terlihat dari hasil gambar di atas, jika lineCap disetel menjadi bulat dan persegi, titik ujung dengan panjang tertentu akan ditambahkan pada kedua ujung ruas garis asli, kecuali bulat merupakan gaya busur dan persegi adalah persegi panjang. gaya. Satu hal yang perlu diperhatikan adalah hanya satu jalur saat ini yang bisa ada dalam konteks gambar kanvas pada saat yang sama. Untuk menggambar segmen garis yang berbeda, beginPath() harus dipanggil sebelum setiap gambar untuk menghapus rute saat ini dan memulai jalur baru.

Mari kita coba menggunakan nilai lineJoin yang berbeda untuk menggambar gaya pada fokus dua segmen garis.

 ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';biarkan warna = ['merah', 'hijau', 'biru'];biarkan lineJoins = ['bevel', 'bulat' , 'miter'];for (biarkan [index, lj] dari lineJoins.entries()) { ctx.strokeStyle = warna[index]; //Atur warna segmen garis ctx.lineJoin = lj; //Atur lineJoin ctx.beginPath(); //Hapus jalur saat ini ctx.moveTo(10 + 80 * index, 20); 80 * indeks, 20); ctx.lineTo(50 + 80 * indeks, 60); ctx.fillText(lj, 40 + 80 * indeks, 80);}

Terlihat ketiga jenis lineJoin ini berbeda dalam pengolahan fokus kedua ruas garisnya. Diantaranya, saat mengatur lineJoin=miter , rasio maksimum panjang garis mitra dengan setengah lebar garis dapat diatur dengan mengatur atribut miterLimit . Ketika rasio ini terlampaui, lineJoin akan mengadopsi metode bevel.

Kanvas tidak hanya dapat menggambar garis padat, tetapi juga garis putus-putus. Gambar garis putus-putus dengan mengatur properti lineDashOffset dan memanggil setLineDash() .

 ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); //Mewakili 8 piksel pada bagian garis padat dan 8 piksel pada bagian celah let colours = ['merah', 'hijau', 'biru'];biarkan lineDashOffsets = [1, 2, 4];untuk (biarkan [indeks, ldOffset] dari lineDashOffsets.entries()) { ctx.strokeStyle = warna[indeks]; //Warna segmen garis ctx.lineDashOffset = ldOffset; //Offset disetel ctx.beginPath(); 100, 20 + 20 * indeks); ctx.stroke(); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * indeks);}

Seperti yang Anda lihat dari gambar, lineDashOffset adalah set offset untuk mulai menggambar garis putus-putus. Metode setLineDash() menerima parameter array. Jika jumlah array adalah bilangan ganjil, metode ini akan menyalin elemen array saat ini secara default untuk menjadikannya bilangan genap. Dari elemen ke 0 mewakili panjang bagian garis padat, elemen ke 1 mewakili panjang bagian celah, elemen ke 2 mewakili panjang bagian garis padat, elemen ke 3 mewakili panjang bagian celah, jika ia mencapai elemen terakhir array, ia akan memulai dari awal lagi, dan seterusnya.

 ctx.lineWidth = 10;ctx.textAlign = 'center';biarkan warna = ['merah', 'hijau', 'biru', 'abu-abu'];biarkan lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];for (biarkan [indeks, ld] dari lineDashes.entries()) { ctx.strokeStyle = warna[indeks]; //Atur warna ctx.setLineDash(ld); //Atur lineDash ctx.beginPath(); + 20 * indeks); ctx.stroke(); ctx.fillText(`garis putus-putus:[${ld}]`, 240, 25 + 20 * indeks);} 

 biarkan lineDashOffset = 0; //lineDashOffsetctx.strokeStyle = 'hijau';function animate() { if (lineDashOffset > 25) { lineDashOffset = 0; kanvas saat ini ctx.lineDashOffset = -lineDashOffset; //Setel lineDashOffset ctx.setLineDash([4, 4]); //Mengatur panjang garis padat dan panjang celah ctx.rect(20, 20, 100, 100); //Tambahkan jalur saat ini ke kanvas Stroke lineDashOffset += 1; //lineDashOffset offset ditambah 1 window.requestAnimationFrame(animate); //Gunakan frame rate browser untuk menjalankan fungsi animate}animate();

Saat menggambar segmen garis, Anda harus memahami konsep jalur saat ini di kanvas. Pada saat tertentu, hanya ada satu jalur saat ini di kanvas. Saat memulai jalur baru, beginPath() harus dipanggil. Anda dapat mengatur gaya gambar segmen garis dengan mengatur lineWidth , lineCap , dan lineJoin . Saat menggores segmen garis, Anda dapat mengatur warna segmen garis melalui strokeStyle .

Tidak hanya garis padat yang dapat digambar di kanvas, tetapi garis putus-putus juga dapat digambar melalui lineDashOffset dan setLineDash() .

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.