cari
Rumahhujung hadapan webTutorial H5html5 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.
Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Sambungan antara H5 dan HTML5: Persamaan dan PerbezaanSambungan antara H5 dan HTML5: Persamaan dan PerbezaanApr 24, 2025 am 12:01 AM

H5 dan HTML5 adalah konsep yang berbeza: HTML5 adalah versi HTML, yang mengandungi unsur -unsur baru dan API; H5 adalah rangka kerja pembangunan aplikasi mudah alih berdasarkan HTML5. HTML5 Parses dan membuat kod melalui pelayar, manakala aplikasi H5 perlu menjalankan bekas dan berinteraksi dengan kod asli melalui JavaScript.

Blok bangunan kod H5: elemen utama dan tujuan merekaBlok bangunan kod H5: elemen utama dan tujuan merekaApr 23, 2025 am 12:09 AM

Unsur -unsur utama HTML5 termasuk ,,,,,, dan lain -lain, yang digunakan untuk membina laman web moden. 1. Tentukan kandungan kepala, 2.

HTML5 dan H5: Memahami Penggunaan BiasaHTML5 dan H5: Memahami Penggunaan BiasaApr 22, 2025 am 12:01 AM

Tidak ada perbezaan antara HTML5 dan H5, iaitu singkatan HTML5. 1.HTML5 adalah versi kelima HTML, yang meningkatkan fungsi multimedia dan interaktif laman web. 2.H5 sering digunakan untuk merujuk kepada laman web atau aplikasi mudah alih berasaskan HTML5, dan sesuai untuk pelbagai peranti mudah alih.

HTML5: Blok Bangunan Web Moden (H5)HTML5: Blok Bangunan Web Moden (H5)Apr 21, 2025 am 12:05 AM

HTML5 adalah versi terkini bahasa markup hiperteks, yang diseragamkan oleh W3C. HTML5 memperkenalkan tag semantik baru, sokongan multimedia dan peningkatan bentuk, meningkatkan struktur web, pengalaman pengguna dan kesan SEO. HTML5 memperkenalkan tag semantik baru, seperti,, dan lain -lain, untuk menjadikan struktur laman web lebih jelas dan kesan SEO lebih baik. HTML5 menyokong elemen multimedia dan tiada pemalam pihak ketiga diperlukan, meningkatkan pengalaman pengguna dan kelajuan memuatkan. HTML5 meningkatkan fungsi bentuk dan memperkenalkan jenis input baru seperti, dan lain -lain, yang meningkatkan pengalaman pengguna dan membentuk kecekapan pengesahan.

Kod H5: Menulis HTML5 Bersih dan CekapKod H5: Menulis HTML5 Bersih dan CekapApr 20, 2025 am 12:06 AM

Bagaimana cara menulis kod HTML5 yang bersih dan cekap? Jawapannya adalah untuk mengelakkan kesilapan biasa dengan tag semantik, kod berstruktur, pengoptimuman prestasi dan mengelakkan kesilapan biasa. 1. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Pastikan kod berstruktur dan boleh dibaca, menggunakan lekukan dan komen yang sesuai. 3. Mengoptimumkan prestasi dengan mengurangkan tag yang tidak perlu, menggunakan CDN dan kod pemampatan. 4. Elakkan kesilapan biasa, seperti tag tidak ditutup, dan pastikan kesahihan kod.

H5: Bagaimana ia meningkatkan pengalaman pengguna di webH5: Bagaimana ia meningkatkan pengalaman pengguna di webApr 19, 2025 am 12:08 AM

H5 meningkatkan pengalaman pengguna web dengan sokongan multimedia, penyimpanan luar talian dan pengoptimuman prestasi. 1) Sokongan multimedia: H5 dan Elemen Memudahkan pembangunan dan meningkatkan pengalaman pengguna. 2) Penyimpanan Luar Talian: WebStorage dan IndexedDB membenarkan penggunaan luar talian untuk meningkatkan pengalaman. 3) Pengoptimuman Prestasi: Pekerja web dan elemen mengoptimumkan prestasi untuk mengurangkan penggunaan jalur lebar.

Dekonstruktur Kod H5: Tag, Elemen, dan AtributDekonstruktur Kod H5: Tag, Elemen, dan AtributApr 18, 2025 am 12:06 AM

Kod HTML5 terdiri daripada tag, elemen dan atribut: 1. Tag mentakrifkan jenis kandungan dan dikelilingi oleh kurungan sudut, seperti. 2. Unsur terdiri daripada tag permulaan, kandungan dan tag akhir, seperti kandungan. 3. Atribut menentukan pasangan nilai utama dalam tag permulaan, meningkatkan fungsi, seperti. Ini adalah unit asas untuk membina struktur web.

Memahami Kod H5: Asas HTML5Memahami Kod H5: Asas HTML5Apr 17, 2025 am 12:08 AM

HTML5 adalah teknologi utama untuk membina laman web moden, menyediakan banyak elemen dan ciri -ciri baru. 1. HTML5 memperkenalkan unsur -unsur semantik seperti, dan lain -lain, yang meningkatkan struktur laman web dan SEO. 2. Sokongan unsur multimedia dan menanamkan media tanpa pemalam. 3. Borang meningkatkan jenis input baru dan sifat pengesahan, memudahkan proses pengesahan. 4. Menawarkan fungsi storan luar talian dan tempatan untuk meningkatkan prestasi laman web dan pengalaman pengguna.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),