Canvas createLinearGradient() ਮੱਥਕ

Canvas ਪ੍ਰਤੀਯੋਗਿਤਾ ਕਿਤਾਬ

ਨਿਰਧਾਰਨ ਅਤੇ ਵਰਤੋਂ

createLinearGradient() ਮੰਥਨ ਵਿੱਚ ਲਾਈਨਰੀ ਮੰਥਨ ਆਬਜ਼ਤ ਬਣਾਉਣ ਦਾ ਮੰਥਨ

gradient ਨੂੰ ਚੌਰਾਕਾਰ, ਗੋਲਾ, ਰੇਖਾ, ਲਿਖਤ ਆਦਿ ਦੇ ਪੂਰਣ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。

ਸੁਝਾਅ:ਇਸ ਆਬਜ਼ਤ ਦੇ ਰੂਪ ਵਿੱਚ ਵਰਤੋਂ ਕਰੋ: strokeStyle ਜਾਂ fillStyle ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਮੁੱਲ

ਸੁਝਾਅ:ਵਰਤੋਂ ਕਰੋ: addColorStop() ਮੰਥਨ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਰੰਗਾਂ ਦੀਆਂ ਨਿਰਦੇਸ਼ਾਂ ਨੂੰ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਅਤੇ ਰੰਗ ਦੇ gradient ਵਿੱਚ ਕਿਸ ਥਾਂ ਰੰਗ ਹੈ。

ਉਦਾਹਰਣ

ਹੋਰ ਦੇਖੋ:

ਕਾਲੇ ਤੋਂ ਸਫੇਦ ਤੱਕ ਦੇ ਰੰਗ ਦੇ ਕਿਰਨ (ਸੱਜੇ ਤੋਂ ਵੱਲੋਂ ਸੱਦੇ ਤੱਕ) ਨੂੰ ਪ੍ਰਤੀਸਥਾਪਿਤ ਕਰੋ, ਜਿਸ ਨੂੰ ਵੱਡੇ ਚੌਰਾਕਾਰ ਨੂੰ ਪੂਰਣ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ:

ਤੁਹਾਡਾ ਬਰਾਊਜ਼ਰ HTML5 canvas ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ。

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);

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਵਿਧੀ

context.createLinearGradient(x0,y0,x1,y1);

ਪੈਰਾਮੀਟਰ ਦਾ ਮੁੱਲ

ਪੈਰਾਮੀਟਰ ਵਰਣਨ
x0 ਕਿਰਨ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਪੱਥਰ ਦੇ x ਨਿਰਦੇਸ਼ਾਂ
y0 ਕਿਰਨ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਪੱਥਰ ਦੀ y ਨਿਰਦੇਸ਼ਾਂ
x1 ਕਿਰਨ ਦੇ ਸਮਾਪਤ ਹੋਣ ਵਾਲੇ ਪੱਥਰ ਦੇ x ਨਿਰਦੇਸ਼ਾਂ
y1 ਕਿਰਨ ਦੇ ਸਮਾਪਤ ਹੋਣ ਵਾਲੇ ਪੱਥਰ ਦੀ y ਨਿਰਦੇਸ਼ਾਂ

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

ਇੱਕ ਕਿਰਨ ਨੂੰ ਪ੍ਰਤੀਸਥਾਪਿਤ ਕਰੋ (ਉੱਤੇ ਤੋਂ ਨੀਚੇ ਤੱਕ), ਜਿਸ ਨੂੰ ਵੱਡੇ ਚੌਰਾਕਾਰ ਨੂੰ ਪੂਰਣ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ:

ਤੁਹਾਡਾ ਬਰਾਊਜ਼ਰ canvas ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ。

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);

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

ਕਿਰਨ ਨੂੰ ਕਾਲੇ ਤੋਂ ਲੱਖੇ ਅਤੇ ਸਫੇਦ ਤੱਕ ਦੇ ਰੰਗ ਦੇ ਤੌਰ 'ਤੇ ਮੰਨੋ ਹੈ, ਜਿਸ ਨੂੰ ਵੱਡੇ ਚੌਰਾਕਾਰ ਨੂੰ ਪੂਰਣ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ:

ਤੁਹਾਡਾ ਬਰਾਊਜ਼ਰ canvas ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ。

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);

ਆਪਣੇ ਆਪ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਨੰਬਰਾਂ ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸਮਰਥਨ ਦੇਣ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਇਆ ਗਿਆ ਹੈ。

ਚਰੋਮ ਐਜ਼ ਫਾਰਫੈਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਚਰੋਮ ਐਜ਼ ਫਾਰਫੈਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
4.0 9.0 3.6 4.0 10.1

ਟਿੱਪਣੀਆਂ:ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਅਤੇ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਦੀਆਂ ਸੰਸਕਰਣਾਂ <canvas> ਐਲੀਮੈਂਟ ਨਹੀਂ ਸਮਰਥਤ ਹਨ。

Canvas ਪ੍ਰਤੀਯੋਗਿਤਾ ਕਿਤਾਬ