Metode HTML canvas createRadialGradient()
Definisi dan penggunaan
createLinearGradient() Metode createRadialGradient() untuk membuat objek gradient radial/circular.
Gradient dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dan lainnya.
Petunjuk:Gunakan objek ini sebagai strokeStyle atau fillStyle nilai properti.
Petunjuk:Gunakan addColorStop() Metode menentukan warna yang berbeda, serta tempat letak warna di dalam objek gradient.
Contoh
Menggambar sebuah persegi panjang dan diisi dengan garis gelombang radial/circular:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Isi dengan garis gelombang
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Sintaks
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| x0 | Koordinat x lingkaran awal gradasi |
| y0 | Koordinat y lingkaran awal gradasi |
| r0 | Jari-jari lingkaran awal |
| x1 | Koordinat x lingkaran akhir gradasi |
| y1 | Koordinat y lingkaran akhir gradasi |
| r1 | Jari-jari lingkaran akhir |
Dukungan browser
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
