tutorial pengembangan web terbaru
 

HTML Canvas Gradien


Canvas - Gradien

Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Bentuk di kanvas tidak terbatas pada warna solid.

Ada dua jenis yang berbeda dari gradien:

  • createLinearGradient ( x,y,x1,y1 ) - menciptakan gradien linier
  • createRadialGradient ( x,y,r,x1,y1,r1 ) - menciptakan radial / melingkar gradien

Setelah kami memiliki objek gradien, kita harus menambahkan dua atau lebih berhenti warna.

The addColorStop() metode menentukan berhenti warna, dan posisinya di sepanjang gradien. posisi gradien dapat di mana saja antara 0-1.

Untuk menggunakan gradien, mengatur fillStyle atau strokeStyle properti untuk gradien, kemudian menggambar bentuk (rectangle, text, or a line) .


Menggunakan createLinearGradient()

Contoh

Buat gradien linier. Isi persegi panjang dengan gradien:

Browser Anda tidak mendukung tag kanvas HTML5.

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);
Cobalah sendiri "

Menggunakan createRadialGradient() :

Contoh

Buat radial / melingkar gradien. Isi persegi panjang dengan gradien:

Browser Anda tidak mendukung tag kanvas HTML5.

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);
Cobalah sendiri "