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
Apa yang dirujuk oleh H5? Meneroka konteksApa yang dirujuk oleh H5? Meneroka konteksApr 12, 2025 am 12:03 AM

H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo

H5: Alat, Rangka Kerja, dan Amalan TerbaikH5: Alat, Rangka Kerja, dan Amalan TerbaikApr 11, 2025 am 12:11 AM

Alat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.

Warisan HTML5: Memahami H5 pada masa kiniWarisan HTML5: Memahami H5 pada masa kiniApr 10, 2025 am 09:28 AM

Html5hassignificlylylectransformedwebdevelopmentbyintroducingsemanticelements, enhancingmultimediasupport, andimprovingperformance.1) itmadewebebsitesmoreaccessibleandseo-friendlywithSemhyViVeShive, dan

Kod H5: Kebolehcapaian dan HTML SemantikKod H5: Kebolehcapaian dan HTML SemantikApr 09, 2025 am 12:05 AM

H5 meningkatkan kebolehaksesan laman web dan kesan SEO melalui unsur -unsur semantik dan atribut ARIA. 1. Gunakan, dan lain -lain untuk mengatur struktur kandungan dan meningkatkan SEO. 2. Atribut Aria seperti ARIA-Label meningkatkan kebolehcapaian, dan pengguna teknologi bantuan boleh menggunakan laman web dengan lancar.

Adakah H5 sama dengan HTML5?Adakah H5 sama dengan HTML5?Apr 08, 2025 am 12:16 AM

"H5" dan "HTML5" adalah sama dalam kebanyakan kes, tetapi mereka mungkin mempunyai makna yang berbeza dalam senario tertentu tertentu. 1. "HTML5" adalah standard yang ditentukan oleh W3C yang mengandungi tag dan API baru. 2. "H5" biasanya merupakan singkatan HTML5, tetapi dalam pembangunan mudah alih, ia boleh merujuk kepada rangka kerja berdasarkan HTML5. Memahami perbezaan ini membantu menggunakan istilah ini dengan tepat dalam projek anda.

Apakah fungsi H5?Apakah fungsi H5?Apr 07, 2025 am 12:10 AM

H5, atau HTML5, adalah versi kelima HTML. Ia menyediakan pemaju dengan set alat yang lebih kuat, menjadikannya lebih mudah untuk membuat aplikasi web yang kompleks. Fungsi teras H5 termasuk: 1) unsur -unsur yang membolehkan lukisan grafik dan animasi di laman web; 2) tag semantik seperti, dan lain -lain untuk menjadikan struktur laman web jelas dan kondusif untuk pengoptimuman SEO; 3) API baru seperti perkhidmatan berasaskan lokasi GeolocationPi; 4) Keserasian silang penyemak imbas perlu dipastikan melalui ujian keserasian dan perpustakaan polyfill.

Cara melakukan pautan h5Cara melakukan pautan h5Apr 06, 2025 pm 12:39 PM

Bagaimana untuk membuat pautan H5? Tentukan sasaran pautan: Dapatkan URL halaman atau aplikasi H5. Buat HTML Anchors: Gunakan & lt; a & gt; Tag untuk membuat sauh dan tentukan URL sasaran pautan. Tetapkan sifat pautan (pilihan): Tetapkan sasaran, tajuk, dan sifat onClick seperti yang diperlukan. Tambah ke laman web: Tambah kod utama HTML ke laman web di mana anda mahu pautan muncul.

Cara menyelesaikan masalah keserasian H5Cara menyelesaikan masalah keserasian H5Apr 06, 2025 pm 12:36 PM

Penyelesaian kepada isu keserasian H5 termasuk: menggunakan reka bentuk responsif yang membolehkan laman web menyesuaikan susun atur mengikut saiz skrin. Gunakan alat ujian silang penyemak imbas untuk menguji keserasian sebelum dilepaskan. Gunakan Polyfill untuk memberi sokongan untuk API baru untuk pelayar yang lebih tua. Ikuti piawaian web dan gunakan kod yang berkesan dan amalan terbaik. Gunakan preprocessors CSS untuk memudahkan kod CSS dan meningkatkan kebolehbacaan. Mengoptimumkan imej, mengurangkan saiz laman web dan mempercepatkan pemuatan. Dayakan HTTPS untuk memastikan keselamatan laman web.

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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

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),

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft