html5 Tutorial lukisan kanvas (4)—Laluan tidak tertutup dan kaedah pengisian kecerunan_html5 kemahiran tutorial

Secara umumnya terdapat dua cara melukis iaitu mengisi dan mengusap Artikel sebelum ini telah pun membincangkan tentang kaedah strok.
Pengisian adalah fill(), sangat mudah, bukan? Dan sama seperti strokeStyle mewakili gaya stroke, fillStyle mewakili gaya isian.
ctx.fillStyle = 'Warna'; Gaya isian lalai ialah hitam legap

Soalan: Bolehkah laluan tidak tertutup diisi?
Ya. Kanvas akan bersambung terus dari titik akhir laluan semasa anda ke titik mula dan kemudian mengisinya. Seperti yang ditunjukkan dalam gambar:

Tetapi anda boleh mendapati bahawa perenggan terakhir tidak diusap.
Ingat bahawa dalam artikel kami sebelum ini, kami melukis segi empat sama dengan 4 garisan, tetapi kanvas tidak begitu buruk, malah ia tidak mempunyai fungsi untuk melukis segi empat tepat secara langsung. Anda boleh menggunakan fillRect() untuk terus mengisi segi empat tepat:

Salin kod

Kodnya adalah seperti berikut:

ctx.fillRect(x,y,width,height);

X dan y di sini merujuk kepada koordinat titik permulaan sudut kiri atas segi empat tepat , ingat.
Apabila bercakap tentang fillRect, kita perlu menyebut strokeRect.
Terdapat juga fillText dan strokeText Mengenai fungsinya, anda mungkin telah menekanya di sini.

Warna kecerunan isian Kanvas
Dalam Kanvas, warna kecerunan juga terbahagi kepada dua jenis iaitu kecerunan linear dan kecerunan jejarian, dan kaedah menciptanya juga adalah bebas. Mari kita lihat dahulu cara mencipta kecerunan linear.
Buat Kecerunan Linear = buatLinearGradient - Lihat, masih perkataan yang sangat mudah. Sintaksnya adalah seperti berikut:
createLinearGradient(x1,y1,x2,y2) mempunyai 4 parameter! Nampaknya begitu rumit, tetapi sebenarnya ini agak mudah, kerana seperti yang telah kita katakan sebelum ini, satu titik dalam dunia rata ditentukan oleh koordinat x dan koordinat y. Oleh itu, x1 dan y1 mewakili koordinat titik permulaan bagi kecerunan linear, dan x2 dan y2 mewakili koordinat titik akhir.
Kelebihan ini adalah sangat mudah jika kita ingin mencipta kecerunan linear pepenjuru. Tetapi mari kita cuba mencipta kecerunan linear mendatar dahulu.
var linear = ctx.createLinearGradient(100,100,200,100) Kecerunan itu nampaknya tercipta, jadi bolehkah kita mengisinya? ————Kecerunan ini kosong dan tiada warna.
Cara untuk menambah warna pada bar kecerunan ialah addColorStop (kedudukan, warna). >

Salin kodKod tersebut adalah seperti berikut:

var linear = ctx.createLinearGradient(100,100,000 );
linear.addColorStop(0,'#fff');

Saya menggunakan 3 addColorStops di sini, yang bermaksud menambah 3 warna pada bar kecerunan.

Nota

: Parameter kedudukan addColorStop sentiasa nombor antara 0-1, yang boleh menjadi dua tempat perpuluhan, menunjukkan peratusan. Dia tidak boleh menerima parameter seperti '3px'.
Pada masa ini, kita boleh mengisi warna kecerunan, tetapi kita mesti menetapkan kecerunan yang ditentukan untuk mengisiStyle



Salin kod

Kodnya adalah seperti berikut: var linear = ctx.createLinearGradient(100,100,200,100); ( 0.5,'#f0f'); linear.addColorStop(1,'#333'); );

ctx.stroke();

Perhatikan bahawa fillRect dan strokeRect melukis laluan bebas Seperti yang ditunjukkan dalam kod di atas, memanggil lejang selepas fillRect tidak akan mengusap segi empat tepat yang baru dilukis.
Selepas ujian, saya menemui masalah yang sangat menjengkelkan, iaitu, koordinat kecerunan linear adalah relatif kepada keseluruhan julat Kanvas. Sebagai contoh, di sini, titik permulaan kecerunan linear saya ialah 100,100 Jika saya melukis segi empat tepat pada 0,0 dan mengisinya dengan kecerunan ini, saya akan mendapati bahawa tiada pengisian - kerana julat kecerunan saya hanya melebihi segi empat tepat. skop.
Ini benar-benar tetapan menipu.

Soalan: Adakah warna akan diisi sebelum titik permulaan kecerunan dan selepas titik penamat kecerunan?
Ya. Warna sebelum titik permulaan ialah warna permulaan, dan warna selepas titik akhir sentiasa warna akhir.
Bagaimana untuk menamatkan warna hujung, anda boleh mengisi warna hujung lutsinar selepas warna hujung. Contohnya:

Salin kod

Kod tersebut adalah seperti berikut:

linear.addColorStop (0.99,' #333');
linear.addColorStop(1,'rgba(51,51,51,0)');

Mengikut pelan sebelumnya, saya akan membina kecerunan linear condong untuk mencuba. Cuma tukar parameter createLinearGradient

Salin kod

Kodnya adalah seperti berikut:

<.> var linear = ctx.createLinearGradient(100,100,200,200);

Kemudian, mari kita cuba kecerunan jejari (kecerunan bulat). Sama seperti createLinearGradient, kaedah mencipta kecerunan jejari ialah: createRadialGradient, tetapi parameternya boleh sangat berbeza:
createRadialGradient(x1,y1,r1,x2,y2,r2) dengan x1,y1,x2,y2 masih yang sama Mewakili titik permulaan dan titik akhir, tetapi titik permulaan dan titik akhir di sini adalah kedua-dua bulatan, dan x, y ialah koordinat pusat bulatan. Oleh itu, r1 dan r2 ialah jejari bulatan permulaan dan jejari bulatan hujung masing-masing. Seperti yang ditunjukkan dalam gambar:

Pada tanggapan saya, nampaknya kecerunan jejari ialah bulatan, pusat bulatan ialah titik permulaan, dan jejari bulatan ialah titik akhir. Tetapi kecerunan jejari dalam kanvas sebenarnya berbeza Titik permulaan adalah bulatan dan titik akhir adalah bulatan, yang berbeza dari pemahaman saya.
Kita bermula dari yang paling mudah. Pertama, buat kecerunan jejari yang sangat teratur, iaitu, pusat bulatan kecerunan ialah titik permulaan kecerunan. Kerana kecerunan jejari biasa, pusat adalah pusat bulatan, jadi kita harus cuba mengelakkan pesongan. Jadi, mari kita jadikan pusat bulatan penghujung bertepatan dengan pusat bulatan permulaan, bukan?

Salin kod

Kod tersebut adalah seperti berikut: var radial = ctx.createRadialGradient (55, 55,10,55,55,55); //Koordinat pusat bulatan kebetulanradial.addColorStop(0,'#fff');

radial.addColorStop(0.9,'#555');

radial.addColorStop(1,'#f00');

Di sini saya menetapkan koordinat tengah bulatan permulaan kecerunan jejarian dan bulatan akhir adalah sama, dan jejari bulatan permulaan ialah 10, dan jejari bulatan akhir ialah 55. Julat kecerunan jejari akhir yang dilukis ialah bulatan dengan lebar dan tinggi 110, Perhatikan bahawa julat kecerunan adalah berdasarkan julat bulatan titik akhir.
(Anda boleh melihat bahawa masih terdapat warna di luar julat bulatan hujung. Warna ini ialah warna hujung. Walau bagaimanapun, jika anda cuba menggunakan radial.addColorStop(1.5,'#0f0′); untuk mentakrifkan warna di luar julat kecerunan, Anda masih akan mendapat ralat).
Jadi, apakah kegunaan jejari bulatan permulaan? ——Pusat kecerunan jejari biasa (mari kita panggil ia "pusat perubahan"...) hanyalah satu titik dan bukan bulatan. Sebenarnya, kami betul. Bulatan titik permulaan ini bersamaan dengan titik, tetapi ia mungkin lebih besar.
Mari kita jadikan jejari bulatan permulaan sangat besar, hampir dengan jejari bulatan penghujung:

Salin kod


Kodnya adalah seperti berikut:

var radial = ctx.createRadialGradient(55,55,50,55,55,55); //sangat dekat

WarnaStop lain kekal tidak berubah, dan kemudian grafik menjadi seperti ini.

Dalam erti kata lain, warna permulaan kecerunan jejari dalam kanvas dilukis dari luar julat bulatan permulaan, dan keseluruhan warna bulatan permulaan ialah warna permulaan.
Kami menetapkan jejari bulatan permulaan kepada 0, dan "pusat perubahan" kecerunan jejari adalah benar-benar titik.
Kebanyakan masa kami tidak memerlukan kecerunan jejari yang sangat formal Sebaliknya, kami mahu pusat perubahannya diimbangi, serupa dengan gambar di bawah:

Pada masa ini, kelebihan dua bulatan dalam kecerunan jejari kanvas keluar selagi pusat bulatan titik permulaan kami dan bulatan berakhir tidak bertepatan, pusat perubahan juga akan beralih:
var jejari = ctx. .createRadialGradient(75,75, 0,55,55,55); tetapi julat kecerunan pada masa ini masih julat bulatan titik akhir.
Ramai orang dilahirkan dengan mentaliti yang merosakkan Contohnya, di sini, jejari bulatan hujung sentiasa lebih besar daripada bulatan permulaan, tetapi apa yang akan berlaku jika mereka diterbalikkan?

Salin kod

Kod tersebut adalah seperti berikut:

var radial = ctx.createRadialGradient (75, 75,55,55,55,0);

Selepas ujian, ini tidak akan melaporkan ralat, tetapi kecerunan asal dari dalam ke luar telah ditukar kepada kecerunan dari luar ke dalam. Ini adalah kegunaan yang baik.

Terdapat masalah lain jika kita mengimbangi pusat bulatan permulaan dan julat bulatan permulaan melebihi julat bulatan penamat,

Apa yang akan berlaku pada masa ini?

Ah! ? Apa yang sedang berlaku? !
Ini berlaku apabila bulatan titik permulaan dan bulatan titik penamat hanya sebahagiannya bertindih. Jadi, jika anda mahukan kecerunan jejari biasa, pastikan satu bulatan membalut bulatan yang lain sepenuhnya.
Selain itu, memandangkan kecerunan boleh ditetapkan kepada fillStyle, ia juga boleh ditetapkan kepada strokeStyle. Anda tahu kesannya.