Gradient Canvas HTML

Kanvas - Gradasi

Gradasi dapat digunakan untuk mengisi persegi, lingkaran, garis, teks, dan lainnya. Bentuk di kanvas tidak terbatas hanya warna asli.

Ada dua jenis gradasi yang berbeda:

• createLinearGradient(x,y,x1,y1) - Membuat gradasi linear
• createRadialGradient(x,y,r,x1,y1,r1) - Membuat gradasi radial/circular

Sekali kita memiliki objek gradasi, kita harus menambahkan dua atau lebih referensi warna.

Metode addColorStop() menentukan titik berhenti warna serta posisi sepanjang gradasi. Posisi gradasi dapat berada di antara 0 sampai 1.

Untuk menggunakan gradasi, tentukan properti fillStyle atau strokeStyle menjadi gradasi, lalu gambar bentuk (persegi, teks, atau garis).

Menggunakan createLinearGradient()

Contoh

Membuat gradasi linear. Mengisi segi empat dengan gradasi:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Membuat gradasi
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "merah");
grd.addColorStop(1, "putih");
// Mengisi dengan gradasi
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Coba Sendiri

Menggunakan createRadialGradient():

Contoh

Membuat gradasi radial/circular. Mengisi segi empat dengan gradasi:

JavaScript:

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Membuat gradasi
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "merah");
grd.addColorStop(1, "putih");
// Mengisi dengan gradasi
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Coba Sendiri

Lihat Juga:

Panduan Referensi Lengkap Canvas CodeW3C.com