HTML canvas fillStyle ਪ੍ਰਤੀਭਾਸ਼ਿਤ
ਪਰਿਭਾਸ਼ਣ ਅਤੇ ਵਰਤੋਂ
fillStyle fillStyle ਪ੍ਰਤੀਭਾਸ਼ਿਤ ਵਿੱਚ ਪੂਰਾ ਕਰਨ ਲਈ ਵਰਤੇ ਗਏ ਰੰਗ, ਤੰਦਰੁਸਤੀ ਜਾਂ ਪੈਟਰਨ ਨੂੰ ਪ੍ਰਤੀਭਾਸ਼ਿਤ ਕਰਨ ਜਾਂ ਵਾਪਸ ਲੈਣਾ ਹੈ。
ਉਦਾਹਰਣ
ਉਦਾਹਰਣ 1
ਨੀਲੇ ਰੰਗ ਨਾਲ ਪੂਰਾ ਕੀਤੇ ਗਏ ਚੱਕਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
ਸੁਝਾਅ:ਪੰਨੇ ਦੇ ਨੇੜੇ ਹੋਰ ਉਦਾਹਰਣ ਮਿਲਦੇ ਹਨ。
ਵਿਧੀ
context.fillStyle=color|gradient|pattern;
ਪ੍ਰਤੀਭਾਸ਼ਿਤ ਮੁੱਲ
| ਮੁੱਲ | ਵਰਣਨ |
|---|---|
| color | ਚਿੱਤਰਨ ਪੂਰਾ ਕਰਨ ਦੇ ਰੰਗ ਨੂੰ ਸੂਚਿਤ ਕਰਦਾ ਹੈ CSS ਰੰਗ ਮੁੱਲ。ਮੂਲ ਮੁੱਲ #000000 ਹੈ。 |
| gradient | ਚਿੱਤਰਨ ਵਿੱਚ ਪੂਰਾ ਕਰਨ ਲਈ ਵਰਤੇ ਗਏ ਤੰਦਰੁਸਤੀ ਆਬਜੈਕਟ (ਲਾਇਨਰਜਾਂਰੇਡੀਅਕਸ਼ਨ) |
| pattern | ਚਿੱਤਰਨ ਵਿੱਚ ਪੂਰਾ ਕਰਨ ਲਈ ਵਰਤੇ ਗਏ ਪੈਟਰਨ ਆਬਜੈਕਟ |
ਤਕਨੀਕੀ ਵੇਰਵਾ
| ਮੂਲ ਮੁੱਲ: | #000000 |
|---|
ਹੋਰ ਉਦਾਹਰਣ
ਉਦਾਹਰਣ 2
ਉੱਚੇ ਤੋਂ ਨੀਚੇ ਦੇ ਤੰਦਰੁਸਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਅਤੇ ਇਸ ਨੂੰ ਵੱਡੇ ਚੱਕਰ ਵਜੋਂ ਪੂਰਾ ਕਰੋ:
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
ਕੱਚੇ ਤੋਂ ਪੱਛਮ ਦੇ ਤੰਦਰੁਸਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਅਤੇ ਇਸ ਨੂੰ ਵੱਡੇ ਚੱਕਰ ਵਜੋਂ ਪੂਰਾ ਕਰੋ:
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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
ਉਦਾਹਰਣ 4
ਕਾਲਾ ਤੋਂ ਲਾਲ ਤੋਂ ਸਫੇਦ ਦੇ ਤੰਦਰੁਸਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ ਅਤੇ ਇਸ ਨੂੰ ਵੱਡੇ ਚੱਕਰ ਵਜੋਂ ਪੂਰਾ ਕਰੋ:
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);
ਉਦਾਹਰਣ 5
ਵਰਤੇ ਗਏ ਚਿੱਤਰ:
ਚਿੱਤਰ ਨੂੰ ਚਿੱਤਰਨ ਵਿੱਚ ਪੂਰਾ ਕਰੋ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
ਬਰਾਉਜ਼ਰ ਸਮਰੱਥਾ
ਸਾਰੇ ਸਤਰਾਂ ਵਿੱਚ ਗਿਣਤੀ ਇਸ ਗੁਣ ਦਾ ਪਹਿਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥਾਵਾਨ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਦਿਸਾਈ ਗਈ ਹੈ。
| ਚਰਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|
| ਚਰਮ | ਐਜ਼ | ਫਾਇਰਫਾਕਸ | ਸੈਫਾਰੀ | ਓਪਰਾ |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
ਧਿਆਨ:Internet Explorer 8 ਅਤੇ ਘੱਟ ਤੋਂ ਘੱਟ ਸਮਰੱਥਾਵਾਨ ਵੈਂਡਰਜ਼ ਨਹੀਂ <canvas> ਇਲੈਕਟ੍ਰੌਨਿਕ ਅੰਗ ਸਮਰੱਥਾਵਾਨ ਹਨ。
