کانواس پر فیل اسٹائل کا اپنے اپنے اپنے پرزنٹیشن کا اپنے اپنے پرزنٹیشن کا اپنے اپنے پرزنٹیشن کا اپنے اپنے پرزنٹیشن کا

Canvas ਸੰਦਰਭ ਮੁੱਲ

تعین اور استعمال

fillStyle پرنگ، گرادیئن یا ماڈل کی رنگ کا تعین یا واپسی کا استعمال کا اپنے اپنے اپنے پرزنٹیشن کا اپنے اپنے اپنے پرزنٹیشن کا اپنے اپنے پرزنٹیشن کا اپنے اپنے پرزنٹیشن کا

مثال

مثال 1

ਨੀਲੇ ਰੰਗ ਨਾਲ ਫਿੱਲਿੰਗ ਕਰਨ ਵਾਲੇ ਰੈਕਟੇਂਜ ਨੂੰ ਮੰਡਰਿਚ ਕਰੋ:

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

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

ਉੱਪਰ ਤੋਂ ਨੀਚੇ ਦੇ ਤੰਤਰ ਨੂੰ ਮੰਡਰਿਚ ਕਰੋ ਅਤੇ ਮੰਡਰਿਚ ਕੀਤੇ ਰੰਗ ਨੂੰ ਰੈਕਟੇਂਜ ਵਿੱਚ ਫਿੱਲਿੰਗ ਵਜੋਂ ਵਰਤੋ

ਤੁਹਾਡਾ ਬਰਾਊਜ਼ਰ 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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

ਸਵੈ ਅਭਿਪ੍ਰਾਯ ਕਰੋ

ਇਨਸਟੈਂਸ 4

ਕਾਲੇ ਤੋਂ ਲਾਲ ਤੋਂ ਸਫੇਦ ਦੇ ਤੰਤਰ ਨੂੰ ਮੰਡਰਿਚ ਕਰੋ ਅਤੇ ਮੰਡਰਿਚ ਕੀਤੇ ਰੰਗ ਨੂੰ ਰੈਕਟੇਂਜ ਵਿੱਚ ਫਿੱਲਿੰਗ ਵਜੋਂ ਵਰਤੋ

ਤੁਹਾਡਾ ਬਰਾਊਜ਼ਰ 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);

ਸਵੈ ਅਭਿਪ੍ਰਾਯ ਕਰੋ

ਇਨਸਟੈਂਸ 5

ਵਰਤੇ ਗਏ ਇਮੇਜ:

lamp

ਇਕੱਠੇ ਕਰਕੇ ਪੂਰਨ ਰਿਸ਼ਤੇ ਵਿੱਚ ਇਮੇਜ ਦੀ ਫਿੱਲਿੰਗ ਕਰੋ:

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

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> ਐਲੀਮੈਂਟ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦੀਆਂ ਹਨ。

Canvas ਸੰਦਰਭ ਮੁੱਲ