html5 Tutorial lukisan kanvas (2)—Melukis garis lurus dan menetapkan gaya garisan seperti kemahiran tutorial warna/titik akhir/simpang_html5

Jika anda masih tidak tahu apa itu Kanvas, anda boleh membaca artikel sebelumnya Semasa belajar melukis, garisan adalah yang paling asas, dan sambungan garisan boleh membentuk sebarang grafik. Perkara yang sama berlaku dalam Kanvas.
Sebelum kita mula, mari keluarkan kanvas dan berus:

Salin kodKodnya adalah seperti berikut :

var cvs = document.getElementById('cvs'); // Kanvas
var ctx = cvs.getContext('2d'); 🎜> Jom lukis Semasa menulis, titik permulaan tidak tetap dan boleh berubah pada bila-bila masa. Walaupun kanvas tidak menentukan titik penulisan dengan tangan, terdapat kaedah, iaitu moveTo. Fungsi moveTo adalah bersamaan dengan mengangkat hujung pen dari kanvas dan kemudian mengalihkannya ke titik yang ditentukan (iaitu, koordinat).

Salin kod

Kodnya adalah seperti berikut: ctx.moveTo(x, y)

Tiada grafik akan dilukis semasa proses ini, yang sama dengan anda memegang pen berjuntai di atas kanvas.
Tetapi tidak ada gunanya berjuntai-juntai, kita perlu mula melukis. Mari kita lukis yang paling mudah dahulu: garis lurus
Kaedah melukis garis lurus ialah lineTo Parameternya adalah sama dengan moveTo, iaitu titik.

ctx.lineTo(x,y) Sudah tentu, apabila anda melukis garisan, titik tulisan juga bergerak, jadi selepas lineTo, titik tulisan menjadi titik sasarannya.





Salin kod

Kodnya adalah seperti berikut: ctx.moveTo(100,100) ;

ctx.lineTo(200,100);

Apabila anda memuat semula halaman web, anda akan mendapati bahawa tiada garis yang dijangkakan pada kanvas, tiada apa-apa. Kerana kita kehilangan satu langkah lineTo sebenarnya adalah "laluan" yang dilukis, yang dengan sendirinya tidak kelihatan. Jika kita mahu dia dipamerkan, kita mesti "melukis" dia.
Pelajar yang pernah menggunakan PS pasti tahu dua mod grafik, satu fill dan satu lagi stroke. Sekarang kita telah melukis garisan, ia bersamaan dengan melukis laluan dalam PS Pada masa ini, kita boleh melukis tepi laluan dan grafik akan dipaparkan.
Kaedah sapuan kanvas ialah sapuan(). Sekarang mari kita lengkapkan kod:

Salin kod

Kod adalah seperti berikut: ctx.moveTo(100,100); ctx.lineTo(200,100); anda boleh Melihat garisan. Sudah tentu, anda juga boleh melukis ratusan laluan secara berterusan, dan kemudian melakukan tindakan strok untuk melukis ratusan garisan sekaligus. Sekarang mari kita lukis segi empat tepat dengan 4 garisan:

Salin kod

Kodnya adalah seperti berikut:

ctx.moveTo(100,100); ; ctx.stroke(); Di sini kita lukis keseluruhan laluan dahulu dan kemudian pukul semuanya sekali.

——–Aduan pengarang: Satu kelemahan lukisan Kanvas ialah ia pada asasnya berdasarkan tekaan, yang sangat tidak intuitif.

Peringatan serius: Proses lukisan kanvas (iaitu mengisi dan mengusap) sangat memakan sumber Jika anda ingin menjimatkan sumber sistem dan meningkatkan kecekapan, adalah lebih baik untuk melukis semua laluan dan kemudian mengisi atau mengusap grafik sekali gus.

Kita boleh lihat daripada grafik di atas bahawa ketebalan garisan lalai ialah 1px dan warna garisan adalah hitam. Sudah tentu kita boleh menetapkannya, tetapi perkara yang pelik ialah menetapkan lebar garis ialah lineWidth, tetapi menetapkan gaya garis dipanggil strokeStyle. Mengapa tidak lineStyle? saya pun tak tahu. :





Salin kod

Kod adalah seperti berikut:


ctx.lineWidth = 10 ;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
Kod di atas menetapkan lebar garisan kepada 10px dan warna garisan kepada merah lut sinar.

Seperti yang ditunjukkan dalam Rajah 1, muat semula, ada sesuatu yang tidak kena! Mengapa ada sekeping kecil yang hilang di sudut kiri atas? Ini bukan ilusi. Sebabnya bermula dengan kaedah lukisan garisan kanvas.
Soalan: Jika laluan segi empat tepat yang saya lukis mempunyai lebar dan tinggi 100, dan lebar garisan sisi saya ialah 10px, apakah lebar dan tinggi keseluruhan segi empat tepat dengan sisi yang dilukis? Adakah 100 10*2=120?
Jika tepi dilukis sepenuhnya di luar laluan, ia akan menjadi 120. Tetapi Kanvas tidak. Semua garisan dalam Kanvas mempunyai "garisan tengah", yang terletak di tengah-tengah garisan mutlak. Sebagai contoh, jika lebar garisan anda ialah 1, maka garisan tengah ialah 0.5; jika lebarnya ialah 5, maka garisan tengah ialah 2.5; Apabila grafik kanvas diusap, laluan dijajarkan dengan garis tengah garisan dan kemudian diusap. Seperti yang ditunjukkan dalam Rajah 2:

Jadi, apabila menyurih, separuh daripada garisan berada di bahagian luar dan separuh di bahagian dalam iaitu lebar keseluruhan segi empat tepat di atas ialah 100 (10/2)*2, iaitu bersamaan dengan 110. <.>Itulah sebabnya bahagian kiri atas Ia adalah lumrah untuk sudut kelihatan sumbing. Kerana tiada siapa melukis di sini.
Tetapi mengapa selebihnya sudut tidak bertakuk? Nampak tak pada keempat-empat penjuru gambar anda ada celah?
Itu kerana saya tidak "mengangkat" berus semasa saya melukis garisan Berus itu berterusan, iaitu, tiada pergerakanKe. Jika anda tidak percaya, mari beralihKe sekarang:

Salin kod Kodnya adalah seperti berikut:

ctx.moveTo(100,100); 🎜>ctx.lineTo(100,200); >ctx.stroke();


Kami bergerakKe sebelum melukis baris kedua, dan koordinat moveTo tidak berubah, tetapi selepas menyegarkan, graf menjadi seperti ini. Gambar 3]:




Faham? Kerana kami mengangkat pen.
Sekarang mari padamkan moveTo dan berhenti bimbang tentangnya. Mari kita fikirkan cara mengisi sudut yang hilang di sudut kiri atas?
Pertama sekali, izinkan saya bertanya, adakah laluan kita tertutup? Bukankah ini mengarut? Sudah tentu ia ditutup!

Salah! Ini hanya menjadikan titik terakhir laluan bertepatan dengan titik permulaan, tetapi laluan itu sendiri tidak ditutup!
Bagaimana untuk menutup laluan dalam Kanvas? Gunakan closePath(). ctx.moveTo( 100,100); ctx.closePath( );//Closed path
ctx.lineWidth = 10;

ctx.strokeStyle = 'rgba(255,0,0,0.5)'; >
Segarkan pada masa ini dan ia akan menjadi segi empat sama yang sempurna. Rajah 4:

Setebal mana pun kita buat garisan - lagi tebal garisan, lagi ramai yang suka kan? ————Empat penjuru petak ini ialah sudut tegak sekata dan tidak akan dibulatkan. Bagaimana pula dengan sudut bulat? Sila lihat lejang segi empat sama dalam PS, Rajah 5:

Seperti yang anda lihat, semakin tebal tepi, semakin besar lengkok sudutnya.
Jika saya mahu tepi dalam Canvas sama dengan yang ada di PS, adakah caranya? Sudah tentu, ia adalah atribut lineJoin.
lineJoin, bermaksud persilangan garisan, mempunyai tiga sifat: miter (lalai, sudut tajam), bevel (serong), bulat (bucu bulat), seperti yang ditunjukkan dalam Rajah 6:

Di sana tidak syak lagi bahawa kita dapat memahami sekali gus bahawa segi empat tepat kita mempunyai bucu tajam, jadi cuba ubahnya kepada bucu bulat:
Grafik menjadi seperti ini, Rajah 7:

Sedikit seperti PS , betul tak?
Selain itu, dari gambar sebelum ini, kita tahu bahawa hujung garisan Kanvas adalah rata. Bolehkah ini diubah? Lagipun, ia rata dan tidak kelihatan baik.
juga mungkin, iaitu atribut lineCap, yang mentakrifkan titik akhir baris. lineCap mempunyai 3 nilai: punggung (rata, lalai), bulat (bulatan), persegi (segi empat sama), seperti yang ditunjukkan dalam Rajah 8

Anda boleh mengetahui dengan melihat gambar yang sebenarnya kepala rata dan kepala segi empat sama sahaja. Kedua-dua kepala bulat dan kepala persegi akan menonjol untuk seketika. Itu separuh daripada lebar garisan.
Adakah anda terfikir sesuatu? Haha, untuk masalah laluan tertutup sebelum ini, jika kita set lineCap kepada kepala persegi, kesannya akan sama!
Tetapi demi keselamatan, kita masih perlu menutup laluan, ingat!
Saya juga ingin mengingatkan anda: laluan tertutup tidak mempunyai titik akhir! Oleh itu, gaya titik akhir tidak boleh dilihat pada laluan tertutup.
Juga: lineCap agak serupa dengan lineJoin, berhati-hati agar tidak mengelirukan mereka.
Jika anda mempunyai mata yang tajam dan tidak bernasib baik, anda mungkin mendapati kadangkala garisan 1 piksel tidak lebar 1 piksel, tetapi kelihatan lebih luas dan kabur. Seperti yang ditunjukkan dalam Rajah 9:

Tahniah anda telah menemui pepijat yang bukan pepijat. Ini sangat istimewa saya akan membincangkannya dalam artikel seterusnya.