HTML Tuval Degradeleri
Tuval - Gradyanlar
Degradeler dikdörtgenleri, daireleri, çizgileri, metni vb. doldurmak için kullanılabilir. Tuval üzerindeki şekiller düz renklerle sınırlı değildir.
İki farklı gradyan türü vardır:
- createLinearGradient( x,y,x1,y1 ) - doğrusal bir gradyan oluşturur
- createRadialGradient( x,y,r,x1,y1,r1 ) - bir radyal/dairesel gradyan oluşturur
Bir degrade nesnemiz olduğunda, iki veya daha fazla renk durağı eklemeliyiz.
addColorStop() yöntemi, renk duraklarını ve degrade boyunca konumunu belirtir. Gradyan konumları 0 ile 1 arasında herhangi bir yerde olabilir.
Degradeyi kullanmak için, fillStyle veya konturStyle özelliğini degradeye ayarlayın, ardından şekli (dikdörtgen, metin veya çizgi) çizin.
createLinearGradient()'i kullanma
Örnek
Doğrusal bir degrade oluşturun. Dikdörtgeni degradeyle doldurun:
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);
createRadialGradient()'i kullanma:
Örnek
Radyal/dairesel bir degrade oluşturun. Dikdörtgeni degradeyle doldurun:
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);