HTML5 Tutorial: Tag Canvas menggambar grafik gradien linier

Artikel Pengenalan Wulin.com (www.vevb.com): Aplikasi HTML5 Daily Training Canvas Tag - Menggambar grafik gradien linier.

Sejauh ini, pengetahuan dasar menggambar grafik menggunakan kanvas telah diperkenalkan. Mulai dari bagian ini, kami akan memperkenalkan salah satu pengetahuan menggambar yang lebih canggih lainnya - gradien linier. Pertama, mari kita tinjau Warna FillStyle yang ditentukan dalam "HTML5 Daily Practice: Aplikasi Tag Kanvas - Menggambar Persegiatan". Saat menggambar gradien linier, kita perlu menggunakan objek baru - objek lineargradient, dan menggunakan metode CreateLineArgradiend dari objek konteks grafik untuk membuat objek. Definisi metode ini adalah sebagai berikut:

Context.CreatelineArgradient (XStart, Ystart, Xend, Yend);

xStart: Sumbu horizontal dari titik awal gradien

YSTART: Koordinat vertikal dari titik awal gradien

Xend: Sumbu horizontal titik akhir gradien

Yend: Koordinat vertikal dari titik akhir gradien

Dengan menggunakan metode ini, objek lineargradient menggunakan dua titik koordinat dibuat. Jadi bagaimana seharusnya warna gradien diatur?

Setelah kami melewati objek lineargradient, kami menggunakan metode AddColorstop untuk mengaturnya. Contoh metode ini adalah sebagai berikut:

context.addcolorstop (offset, color);

Gunakan metode ini untuk menambahkan warna gradien, yang memiliki dua parameter:

Offset: Adalah offset dari nomor titik mengambang antara 0-1 dari warna yang meninggalkan titik awal gradien, yang mengatur warna ke offset dari titik awal gradien.

Warna: Apakah warna yang digunakan untuk mengatur gambar

Ilustrasi parameter offset dalam metode AddColorstop