En son web geliştirme öğreticiler
 

HTML canvas createLinearGradient() Method

<Tuval Nesne

Örnek

Bir gradyan tanımlayın (left to right) dikdörtgen için dolgu tarzı olarak, siyahtan beyaza gider:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Kendin dene "

Tarayıcı Desteği

Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.

Yöntem
createLinearGradient() 4.0 9.0 3.6 4.0 10.1

Tanımı ve Kullanımı

createLinearGradient() metodu, lineer bir gradyan nesne oluşturur.

gradyan dikdörtgen, daire, satırlar, metin, vb doldurmak için kullanılabilir

Tip: hiç değer olarak bu nesneyi kullanın strokeStyle veya fillStyle özellikleri.

Tip: kullanın addColorStop() farklı renkleri belirlemek için bir yöntem ve burada gradyan nesnedeki renkleri konumlandırmak için.

JavaScript sözdizimi: context . createLinearGradient( x0,y0,x1,y1 ) ;

Parametre Değerleri

Parametre Açıklama
x0 gradyan başlangıç ​​noktasının x koordinatı
y0 gradyan başlangıç ​​noktasının y koordinatı
x1 gradyanın bitiş noktasının x koordinatı
y1 gradyanın bitiş noktasının y koordinatı

Örnekler

Diğer Örnekler

Örnek

Gradyan tanımlama (top to bottom) için dikdörtgen dolgu tarzı olarak:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Kendin dene "

Örnek

dikdörtgen için dolgu tarzı olarak, beyaza, kırmızıya, siyahtan giden bir gradyan tanımlayın:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Kendin dene "

<Tuval Nesne