Jika Anda belum tahu apa kanvas, Anda dapat memeriksa artikel sebelumnya.
Saat belajar menggambar, garis adalah yang paling mendasar, dan koneksi garis dapat membentuk bentuk apa pun. Hal yang sama berlaku di kanvas.
Sebelum kita mulai, kita mengeluarkan kanvas dan sikat:
var cvs = document.geteLementById ('cvs'); //Kanvas
var ctx = cvs.getContext ('2d'); // Sikat
Saat kami menggambar, titik pena tidak diperbaiki dan akan berubah kapan saja. Meskipun kanvas tidak menentukan titik penulisan melalui tangan, ada juga metode, yang merupakan moveto. Moveto setara dengan mengangkat ujung pena dari kanvas dan memindahkannya ke titik yang ditentukan (mis. Koordinat).
ctx.moveto (x, y)
Tidak ada grafik yang ditarik selama proses ini, yang setara dengan bergoyang di atas kanvas dengan pena Anda.
Tetapi tidak ada gunanya untuk bergoyang, kita harus mulai menggambar. Gambarlah yang paling sederhana: garis lurus
Metode menggambar garis lurus adalah lineto. Parameternya sama dengan Moveto, dan keduanya adalah titik yang sama.
CTX.LINETO (X, Y) Tentu saja, ketika Anda menggambar garis, titik pena juga bergerak, jadi setelah Lineto, titik pena menjadi titik targetnya.
ctx.moveto (100.100);
ctx.lineto (200.100);
Pada saat ini, Anda menyegarkan halaman web dan Anda akan menemukan bahwa tidak ada garis yang diharapkan di kanvas dan tidak ada. Karena kita memiliki satu langkah lebih sedikit. Lineto sebenarnya adalah jalan yang ditarik dan tidak terlihat dengan sendirinya. Jika kita ingin dia menunjukkannya, kita harus menggambarnya.
Siswa yang telah menggunakan PS pasti akan mengetahui dua mode grafik, satu mengisi dan yang lainnya adalah stroke. Sekarang kita telah menggambar garis, yang setara dengan menggambar jalur di PS. Pada saat ini, kita dapat menggambar tepi jalan dan gambar akan ditampilkan.
Metode stroke kanvas adalah stroke (). Sekarang mari kita selesaikan kode:
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.stroke (); Segarkan saat ini dan Anda dapat melihat garis. Tentu saja, Anda juga dapat menggambar ratusan jalur berturut -turut dan kemudian melakukan tindakan stroke untuk menarik ratusan garis sekaligus. Sekarang mari kita gambar persegi panjang dengan 4 baris:
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
ctx.stroke ();
Di sini pertama -tama kita menggambar semua jalan setapak dan kemudian membelai mereka satu demi satu.
- Keluhan penulis: Salah satu hal buruk tentang menggambar kanvas adalah bahwa itu pada dasarnya tergantung pada tebakan, dan itu tidak intuitif.
Kiat serius: Proses menggambar kanvas (mis. Isi dan stroke) sangat memakan sumber daya. Jika Anda ingin menghemat sumber daya sistem dan meningkatkan efisiensi, yang terbaik adalah menggambar semua jalur dan mengisi atau membelai gambar sekaligus.
Dari gambar di atas kita dapat melihat bahwa ketebalan garis default adalah 1px, sedangkan warna garis berwarna hitam. Tentu saja kita bisa mengaturnya, tetapi yang aneh adalah bahwa lebar garis adalah linewidth, sedangkan gaya garis disebut strokestyle. Mengapa tidak lineestyle? Saya juga tidak tahu. :
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
Kode di atas menetapkan lebar garis menjadi 10px, dan warna garis menjadi merah tembus cahaya.
Seperti yang ditunjukkan pada Gambar 1, menyegarkannya, sepertinya ada sesuatu yang salah! Mengapa rasanya sepotong kecil hilang di sudut kiri atas? Ini bukan ilusi. Alasannya dimulai dengan cara menggambar garis kanvas.
PERTANYAAN: Jika jalur persegi panjang yang saya gambar adalah lebar dan tinggi 100, dan lebar garis tepi saya adalah 10px, lalu berapa lebar keseluruhan dan tinggi persegi panjang ini dengan tepi yang ditarik? Apakah 100+10*2 = 120?
Jika tepi benar -benar ditarik di luar jalur, maka itu adalah 120. tetapi kanvas tidak. Garis -garis di kanvas memiliki garis tengah, yang terletak di tengah -tengah absolut dari garis, dan sapuan garis meluas ke kedua sisi dengan garis tengah. Misalnya, jika lebar garis Anda adalah 1, maka garis tengah berada pada 0,5; Jika lebar 5, maka garis tengah berada di 2.5. Ketika sosok kanvas dibelai, jalan setapak cocok dengan garis tengah garis dan kemudian membelai. Seperti yang ditunjukkan pada Gambar 2:
Oleh karena itu, ketika dibelai, setengah dari garis berada di luar dan setengahnya ada di dalam, yaitu, lebar keseluruhan dari persegi panjang atas adalah 100+ (10/2)*2, yang sama dengan 110.
Justru karena alasan inilah wajar untuk memiliki sudut yang hilang di sudut kiri atas. Karena tidak ada yang melukisnya di sini.
Tapi mengapa tidak ada celah di sudut yang tersisa? Lihatlah gambar Anda, jangan ada celah di empat sudut?
Itu karena saya tidak mengangkat sikat selama menggambar garis, dan kuasnya terus menerus, yaitu, saya tidak bergerak sebelumnya. Jika Anda tidak mempercayainya, mari bergerak sekarang:
ctx.moveto (100.100);
ctx.lineto (200.100);
CTX.Moveto (200.100); // Catatan di sini
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Kami pindah ke sebelum menggambar baris kedua, dan koordinat Moveto belum berubah, dan itu masih titik yang sama, tetapi setelah menyegarkan, gambar menjadi seperti ini [Gambar 3]:
Dipahami? Karena kami mengangkat pena.
Sekarang mari kita hapus Moveto, jangan khawatir tentang hal itu, mari kita pikirkan bagaimana mengisi sudut yang hilang di sudut kiri atas?
Pertama, izinkan saya mengajukan pertanyaan, apakah jalan kita ditutup? Bukankah ini omong kosong? Belumkah kita sudah memutar jalan kembali ke titik asal? Tentu saja ditutup!
salah! Ini hanya membuat titik terakhir dari jalur tumpang tindih dengan titik awal, tetapi jalan itu sendiri tidak ditutup!
Bagaimana cara menutup jalan di kanvas? Gunakan ClosePath ().
ctx.moveto (100.100);
ctx.lineto (200.100);
ctx.lineto (200.200);
ctx.lineto (100.200);
ctx.lineto (100.100);
ctx.closepath (); // tutup jalur
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Menyegarkan pada saat ini akan membuat Anda menjadi persegi yang sempurna. Gambar 4:
Tidak peduli seberapa tebal kita mengubah garis - semakin tebal semakin banyak orang seperti mereka, kan? -Keempat sudut kotak ini adalah sudut kanan biasa dan tidak akan halus. Apa masalahnya dengan sudut yang halus? Silakan lihat stroke persegi di PS, Gambar 5:
Saya melihatnya. Semakin tebal tepi, semakin besar busur sudutnya.
Jika saya pikir garis tepi dalam kanvas sama dengan yang ada di PS, apakah ada cara? Tentu saja, ada atribut LinJoin.
LineJoin, yang berarti persimpangan garis, memiliki 3 properti: mitra (default, sudut tajam), bevel (bevel), dan bulat (bundar), seperti yang ditunjukkan pada Gambar 6:
Tidak ada keraguan bahwa kita dapat memahami bahwa persegi panjang kita menggunakan sudut yang tajam, jadi cobalah mengubahnya menjadi sudut bulat:
Grafik menjadi seperti ini, Gambar 7:
Agak seperti PS, bukan?
Selain itu, dari gambar sebelumnya kami mengetahui bahwa kedua ujung garis kanvas datar, dapatkah itu diubah? Lagi pula, itu tidak tampan.
Mungkin juga, yaitu properti Linecap, yang merupakan titik akhir yang mendefinisikan garis. Linecap memiliki 3 nilai: butt (datar, default), bundar (lingkaran), persegi), seperti yang ditunjukkan pada Gambar 8
Anda dapat menemukan bahwa kepala datar sebenarnya sama dengan kepala persegi, satu -satunya perbedaan adalah bahwa kepala datar tidak diregangkan. Baik kepala bundar dan kepala persegi diregangkan dalam sepotong. Berapa lama bagian ini? Itu setengah dari lebar garis.
Pernahkah Anda memikirkan sesuatu? Haha, masalah jalur tertutup sebelumnya, jika kita mengatur linecap sebagai header persegi, efeknya akan sama!
Tetapi untuk berada di sisi yang aman, kita masih harus menutup jalan, ingat!
Saya juga ingin mengingatkan Anda: jalur tertutup tidak memiliki titik akhir! Jadi gaya titik akhir tidak terlihat di jalur tertutup.
Selain itu : Linecap sedikit mirip dengan Linejoin, berhati -hatilah untuk tidak main -main.Jika Anda bermata tajam dan memiliki nasib buruk, Anda mungkin menemukan bahwa kadang-kadang garis 1 piksel tidak selebar 1 piksel, tetapi tampaknya lebih luas dan buram. Seperti yang ditunjukkan pada Gambar 9:
Selamat! Anda menemukan bug yang bukan bug. Ini sangat istimewa, saya akan menempatkannya di artikel berikutnya