Kasus penggunaan kedua dari fillStyle adalah pengisian gradien. Warna gradien dibagi menjadi warna gradien linier dan warna gradien radial.
Gradien linier: secara kasar dibagi menjadi dua langkah. Dua fungsi kanvas baru akan digunakan di sini.
Langkah 1: Gunakan fungsi baru createLinearGradient(xstart,ystart,xend,yend);var linearGrad = konteks.createLinearGradient(xstart,ystart,xend,yend);
Ini memiliki empat parameter. Masing-masing adalah xstart, ystart, xend, dan yend yang membentuk dua koordinat, dan kedua koordinat tersebut membentuk ruas garis. Ruas garis ini sebenarnya adalah garis gradien. Garis gradien digunakan untuk menentukan arah dan skala gradien.
Langkah kedua: Tambahkan colorStop berdasarkan garis gradien ini. Metode ini disebut addColorStop(stop, color). Ini memiliki dua parameter: berhenti dan warna. Parameter pertama adalah nilai floating point yang digunakan untuk menentukan posisi warna kunci. Parameter kedua digunakan untuk menentukan warna warna kunci. linearGrad.addColorStop(berhenti,warna);
Setelah menyelesaikan dua langkah ini, variabel linearGrad dapat diteruskan ke atribut ini sebagai fillStyle.
Lihatlah kodenya:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>Gradien linier</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 800). ; kanvas.tinggi = 600; if (kanvas.getContext(2d)) { var konteks = kanvas.getContext(2d); //Dapatkan lingkungan menggambar konteks var linearGrad = konteks.createLinearGradient(0, 0, 800, 600); //Koordinat awal garis gradien adalah (0,0) dan koordinat akhir adalah (800,600) linearGrad.addColorStop(0.0, '#000'); Parameter pertama mewakili posisi warna kunci. 0 mewakili posisi awal, 1 mewakili posisi akhir, dan parameter kedua mewakili warna warna kunci. linearGrad.addColorStop(1.0, '#fff'); konteks.fillStyle = linearGrad; konteks.fillRect(0, 0, 800, 600); else { alert('Browser Anda tidak mendukung Canvas, silakan coba ubah browser ~ ') } }</skrip>Render:
Setelah kita membuat variabel linearGrad, kita dapat menambahkanColorStop dan menambahkan banyak variabel.
Misalnya:
Kode:
var linearGrad = konteks.createLinearGradient(0, 0, 800, 600); //Koordinat awal garis gradien adalah (0,0) dan koordinat akhir adalah (800,600) linearGrad.addColorStop(0.0, '#fff') ; linearGrad.addColorStop(0,25, '#FB3'); '#690'); linearGrad.addColorStop(0,75, '#09C'); linearGrad.addColorStop(1.0, '#000');
Render:
Selain itu, garis gradien yang kita definisikan adalah miring, dan kita juga dapat mendefinisikannya sebagai horizontal atau vertikal. Kita hanya perlu mengubah koordinat akhir dari garis gradien. Lihatlah kode untuk membuat gradien horizontal:
var linearGrad = konteks.createLinearGradient(0, 0, 800, 0);
Render:
Warna gradien vertikal:
var linearGrad = konteks.createLinearGradient(0, 0, 800, 0);
Render:
Tidak peduli apakah itu dimiringkan secara horizontal atau vertikal, apa yang kita lakukan berjalan melalui seluruh kanvas. Jadi apa efeknya jika garis gradien kita hanya ditetapkan pada sebagian kanvas? Mari kita memodifikasinya
var linearGrad = konteks.createLinearGradient(0, 0, 400, 300);
Render:
Dengan cara yang sama, garis gradien yang kita buat juga bisa melebihi lebar dan tinggi maksimum kanvas ini. Mari kita memodifikasinya
var linearGrad = konteks.createLinearGradient(-200, -100, 1000, 800);
Render:
Selain itu, bentuk isian yang kita gambar belum tentu menempati seluruh kanvas. Kita dapat menyesuaikan bentuk yang kita definisikan secara sewenang-wenang. Bentuk terisi ini akan menemukan warna isian yang sesuai pada garis gradien yang kita tentukan dan mengisinya. Misalnya:
var linearGrad = konteks.createLinearGradient(-200, -100, 1000, 800);
Render:
Gradien radial: Perbedaan dari gradien linier adalah gradien radial mendefinisikan gradien radial. Gradien radial ini ditentukan berdasarkan dua lingkaran konsentris. Berbeda dengan gradien linier yang didefinisikan antara dua titik.
Gradien radial juga memerlukan dua langkah untuk diselesaikan.
Langkah 1: Gunakan fungsi baru createRadialGradient(x0,y0,r0,x1,y1,r1); Tiga parameter pertama menentukan koordinat dan jari-jari cincin pertama, dan tiga parameter terakhir menentukan koordinat dan jari-jari cincin kedua. Seluruh gradien radial terjadi di antara dua lingkaran ini. var radialGrad = konteks.createRadialGradient(x0,y0,r0,x1,y1,r1);
Langkah 2: Ini sama dengan gradien linier, jadi saya tidak akan memperkenalkannya secara detail. radialGrad.addColorStop(berhenti,warna);
Kode ini sangat mirip dengan kode gradien linier. Hanya saja createRadialGradient digunakan di sini. Kami meneruskan parameter createRadialGradient(300,300,0,300,300,500). Tiga parameter pertama menentukan titik dengan radius 0 di tengah kanvas. Tiga parameter terakhir menentukan lingkaran besar dengan radius 500 di tengah kanvas. Ini mendefinisikan gradien radial yang memancar keluar dari suatu titik. Lihatlah kodenya
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=Edge> <title>Gradien radial</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 600). ; kanvas.tinggi = 600; jika (kanvas.getContext(2d)) { var konteks = kanvas.getContext(2d); konteks.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0.0, '#fff'); radialGrad.addColorStop(0.25, '#FB3'); '); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); konteks.fillStyle = radialGrad; konteks.fillRect(0, 0, 600, 600); Browser Anda tidak mendukung Canvas, silakan coba ubah browser Anda~') } }</script>Render:
Anda dapat mencoba mengubah parameter untuk melihat efek berbeda apa yang akan dihasilkan.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.