Tuval - Renk Geçişleri
Renk geçişleri tuval üzerine şekiller düz renkler sınırlı değildir vb dikdörtgen, daire, çizgiler, metin doldurmak için kullanılabilir.
degradelerin iki farklı tipi vardır:
- createLinearGradient( x,y,x1,y1 ) - bir lineer gradyan oluşturur
- createRadialGradient( x,y,r,x1,y1,r1 ) - radyal / dairesel gradyanı
Biz degrade nesnesi sahip olduktan sonra iki ya da daha fazla renk duraklarını eklemelisiniz.
addColorStop() metodu renk durur belirtir, ve gradyan boyunca konumu. Gradyan pozisyonları yerde 1-0 arasında olabilir.
Gradyan kullanmak için, şekil çizmek sonra Degradeye fillStyle veya strokeStyle özelliği ayarlamak (rectangle, text, or a line) .
Kullanılması createLinearGradient()
Örnek
lineer bir gradyan oluşturur. gradyanı ile dikdörtgen 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); Kendin dene " Kullanılması createRadialGradient() :
Örnek
radyal / dairesel gradyanı oluşturur. gradyanı ile dikdörtgen 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); Kendin dene "