HTML کانواس createLinearGradient() میتھد

HTML5 کینواس مرجع دستاویز

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

createLinearGradient() لائنئل تدرج آئیٹم قائم کرنے والی میتھد کا تعین کریں۔

تدرج، مربع، دایره، لائن، ٹیکسٹ اور مزید بھی کی فیلنگ کے لئے استعمال کی جاسکتی ہے۔

نکات:استعمال کریں strokeStyle یا fillStyle کی اقدار کا استعمال کریں۔

نکات:استعمال کریں addColorStop() میتھد کا تعین مختلف رنگیں، نیز gradient آئیٹم میں کس طرح رنگ کی مقام کریں۔

مثال

دیگر دیکھئے:

ایک سورج سے کالے سورج تک اور سورج سے وائٹ تک کی تدرج (از بائیں سمت راستہ) کی تعریف کریں، جو مربع کی فیلنگ کی رنگ کی طرح کی جائے:

آپ کا براوزر HTML5 کانواس تگ کا پشتیبانی نہیں کرتا۔

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

ایک تدرج کی تعریف کریں (از اوپر سے نیچے تک)، جو مربع کی فیلنگ کی رنگ کی طرح کی جائے:

آپ کا براوزر کانواس تگ کا پشتیبانی نہیں کرتا۔

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(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> عنصر کو نہیں دعومت دیتے۔

HTML5 کینواس مرجع دستاویز