Ringkasan Pembelajaran Kanvas Tiga: Menggambar Jalur - Segmen Garis

Beberapa metode menggambar di lingkungan menggambar Canvas adalah metode menggambar langsung, dan beberapa metode menggambar berbasis jalur.

Hanya ada dua metode untuk menggambar grafik secara langsung: strokeRect() dan fillRect(). Meskipun metode strokezText() dan fillText() juga langsung digambar, teks tidak dianggap sebagai grafik.

Sebagian besar sistem gambar, seperti: SVG (Scalable Verctor Graphics, grafik vektor yang dapat diskalakan), Adobe Illustrator, dll., didasarkan pada jalur.

Saat menggunakan sistem gambar ini, Anda perlu menentukan jalur terlebih dahulu, lalu menggores atau mengisinya, atau Anda dapat menggores dan mengisinya agar bentuknya dapat ditampilkan.

Tiga metode menggambar di Canvas:

Dalam lingkungan gambar Canvas, segmen garis juga digambar berdasarkan jalur, yang disebut jalur linier. Metode untuk membuat jalur linier adalah: moveTO() dan lineTo(). Hanya dengan memanggil metode stroke() setelah membuat jalur, garis tersebut dapat dibuat segmen digambar di Canvas.

Ini adalah metode menggambar berbasis jalur yang kami sebutkan sebelumnya, yang harus digores atau diisi;

Biasanya dua titik dihubungkan oleh sebuah garis, jadi menggambar ruas garis sangatlah sederhana. Tentukan titik awal garis melalui moveTO(), dan berpindah ke titik lain melalui lineTo().

 fungsi drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(100, 100);}

Namun, kita tidak dapat melihat segmen garis di kanvas. Sebelumnya telah disebutkan bahwa metode menggambar berbasis jalur harus diberi coretan atau diisi. Jadi untuk melihat hasilnya kita juga harus menggunakan metode stroke().

Jadi kita ubah caranya menjadi berikut sehingga akan tergambar ruas garis

 fungsi drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(200, 200);

Kita juga bisa menggambar segmen garis di kanvas hanya dengan menggunakan lineTo(). Kita ubah kode di atas menjadi seperti gambar di bawah ini, dan efeknya sama.

 fungsi drawLine(){ cxt.lineTo(50, 50); cxt.lineTo(200, 200);

Ringkaslah penggunaan moveTo() dan lineTo()

• moveTo(x,y): Pindahkan goresan ke koordinat x dan y yang ditentukan, menambahkan subjalur ke jalur saat ini. Metode ini tidak akan menghapus subjalur apa pun di jalur saat ini.
• lineTo(x,y): Tarik garis lurus dari posisi saat ini ke posisi x dan y yang ditentukan. Jika tidak ada subjalur di jalur saat ini, maka metode ini berperilaku sama seperti moveTo(). Jika ada subjalur di jalur saat ini, metode ini akan menambahkan titik yang Anda tentukan ke subjalur tersebut.

Mengubah lebar segmen garis

 fungsi= 14; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

 fungsi drawLine(){ cxt.lineWidth = 14; cxt.strokeStyle = 'hijau'; cxt.lineTo(50, 50);

Kita juga bisa menggunakan objek CanvasGradient atau objek CanvasPattern untuk menambahkan warna atau pola gradien ke segmen garis.

 fungsi drawLine(){ cxt.lineWidth = 14; var gradien = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2); 0,5, 'ungu'); gradien.addColorStop(1, 'kuning'); gradien; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

Dari ketiga cara menggambar pada kanvas di atas, kita dapat melihat bahwa jalur busur pada baris kedua merupakan jalur terbuka, dan jalur busur pada baris terakhir merupakan jalur tertutup. Jadi bagaimana jalur tertutup bisa dicapai?

Mari kita lihat dua metode yang lebih penting dalam menggambar jalur di kanvas.

• BeginPath(): Hapus semua sub-jalur saat ini untuk mengatur ulang jalur saat ini dan merencanakan ulang jalur.
• closePath(): digunakan untuk menutup jalur yang terbuka. Hal ini tidak diperlukan. Jika grafik sudah tertutup, yaitu titik saat ini adalah titik awal, fungsi ini tidak melakukan apa pun.

Pertama menggambar polyline

 fungsi drawLine(){ cxt.strokeStyle = 'hijau'; cxt.lineWidth = 2; cxt.moveTo(50, 50); );}

Ubah kode pada contoh di atas dan tambahkan metode BeginPath() dan closePath() ke dalam kode.

 function drawLine(){ //Stroke segitiga cxt.strokeStyle = 'hijau'; cxt.lineWidth = 2; cxt.beginPath(); cxt.moveTo(50, 50); (); cxt.beginPath(); cxt.lineTo(150, 150); cxt.lineTo(150, 250); cxt.stroke();

Dapat dilihat bahwa kita telah menggambar dua jalur di kanvas

Catatan: Setelah memanggil BeginPath(), atau saat kanvas pertama kali dibuat, perintah pembuatan jalur pertama biasanya dianggap sebagai moveTo(). Jadi kita harus menggunakan BeginPath() terlebih dahulu saat menggambar grafik.

Mari lanjutkan memodifikasi kode kita

 function drawLine(){ //Stroke segitiga cxt.strokeStyle = 'hijau'; cxt.lineWidth = 2; cxt.beginPath(); (150, 150);cxt.closePath(); //Polyline cxt.translate(150, 0); cxt.strokeStyle = 'merah'; cxt.lineWidth = 2; cxt.beginPath(); cxt.lineTo(150, 150);cxt.stroke(); cxt.closePath(); //Segitiga terisi hijau cxt.translate(150, 0); cxt.fillStyle = 'hijau'; cxt.lineWidth = 2; .lineTo(50, 150);cxt.lineTo(150, 150); cxt.fill(); cxt.closePath(); //Segitiga terisi merah cxt.translate(150, 0); cxt.fillStyle = 'merah'; 50, 50);cxt.lineTo(50, 150); 150); cxt.closePath(); cxt.isi();}

Dari contoh di atas, kita dapat melihat bahwa perbedaan posisi closePath() juga akan mempengaruhi grafik kita.

Catatan: Saat Anda memanggil fungsi fill(), semua bentuk yang tidak tertutup akan ditutup secara otomatis, sehingga fungsi closePath() tidak diperlukan saat ini.

Tetapi memanggil stroke(): Jika Anda hanya menggunakan closePath() sebelum metode stroke(), jalur tertutup akan terbentuk. Jika Anda memanggil metode closePath() setelah metode stroke(), grafik telah digambar dan arus jalur gambar telah ditutup, sehingga metode closePath() tidak berfungsi.

Mari kita lihat contohnya terlebih dahulu

 fungsi drawLine(){ //Stroke segitiga cxt.lineWidth = 1; cxt.beginPath(); cxt.beginPath(); ; cxt.lineTo(450.5, 150.5);cxt.stroke();}

Kita dapat melihat dari gambar bahwa kita mengatur Lebar garis kedua ruas garis menjadi 1 piksel, tetapi ruas garis di atas menarik dua piksel.

Jika Anda menggambar ruas garis selebar 1 piksel pada batas 2 piksel tertentu, ruas garis tersebut sebenarnya akan menempati lebar 2 piksel;

Karena ketika Anda menggambar segmen garis vertikal selebar 1 piksel pada batas piksel, objek lingkungan gambar kanvas akan mencoba menggambar setengah piksel di sebelah kanan garis tengah batas, dan setengah piksel lainnya di sebelah kiri perbatasan. garis tengah.

Namun, tidak mungkin menggambar segmen garis dengan lebar setengah piksel dalam satu piksel penuh, sehingga setengah piksel di kedua arah diperluas menjadi 1 piksel.

Sebaliknya, gambar berada di antara dua piksel, sehingga setengah piksel di ujung kiri dan kanan garis tengah tidak memanjang, dan jika digabungkan akan menempati lebar tepat 1 piksel. Jadi, jika Anda ingin menggambar ruas garis yang lebarnya benar-benar 1 piksel, Anda harus menggambar ruas garis di antara dua piksel

Sekarang setelah kita memahami cara menggambar segmen garis 1 piksel yang sebenarnya, mari mulai menggambar kisi-kisinya

 function drawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.strokeStyle = 'hijau'; //Gambar garis vertikal untuk(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt .beginPath(); cxt.moveTo(i, 0); cxt.canvas.height); cxt.stroke(); } //Gambar garis horizontal untuk(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); moveTo (0, i); cxt.lineTo(cxt.kanvas.lebar, cxt.stroke(); }}drawLine(10, 10);

Pada contoh di atas, kita menggambar ruas garis pada piksel di antara dua piksel, dan ruas garis yang digambar hanya lebarnya 0,5 piksel.

Meskipun spesifikasi Canvas tidak secara eksplisit menetapkannya, semua implementasi Canvas browser menggunakan teknologi anti-aliasing untuk menciptakan efek gambar segmen garis sub-piksel.

Bagian ini terutama menjelaskan metode menggambar jalur linier di kanvas, terutama menggunakan moveTo() untuk menentukan titik awal, lineTo() untuk menentukan titik akhir, dan stroke() untuk menggambar jalur saat ini. Ketiga metode ini menggambar segmen garis

Ada dua metode penting untuk menggambar jalur di kanvas, BeginPath() dan closePath(). Memanggil BeginPath() sebelum menggambar grafik adalah langkah penting untuk menggambar banyak grafik.

closePath() dapat dihilangkan saat menggunakan fill(), dan Anda juga harus memperhatikan posisi pemanggilan metode closePath().

Saat menggambar ruas garis, kita dapat menggunakan lineWidth untuk mengubah lebar ruas garis dan strokeStyle untuk mengubah warna ruas garis.

Cari tahu batas piksel segmen garis sehingga kita dapat menggambar lebar garis sebenarnya 1 piksel.

Siswa yang tertarik menggambar grafik di atas kanvas, harap terus memperhatikan pembaruan selanjutnya. Jika ada yang salah, harap tunjukkan dan komunikasikan lebih lanjut.

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