Gradien Kanvas HTML
Kanvas - Gradien
Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll. Bentuk pada kanvas tidak terbatas pada warna solid.
Ada dua jenis gradien yang berbeda:
- createLinearGradient( x,y,x1,y1 ) - membuat gradien linier
- createRadialGradient( x,y,r,x1,y1,r1 ) - membuat gradien radial/melingkar
Setelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih color stop.
Metode addColorStop() menentukan perhentian warna, dan posisinya di sepanjang gradien. Posisi gradien bisa di mana saja antara 0 hingga 1.
Untuk menggunakan gradien, atur properti fillStyle atau strokeStyle ke gradien, lalu gambar bentuk (persegi panjang, teks, atau garis).
Menggunakan createLinearGradient()
Contoh
Buat gradien linier. Isi persegi panjang dengan gradien:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Menggunakan createRadialGradient():
Contoh
Buat gradien radial/lingkaran. Isi persegi panjang dengan gradien:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);