Canvas createLinearGradient() متد

دليل مرجعي لـ Canvas

تعریف و کاربرد

createLinearGradient() میتھد لائنئل گرادیئن آئیٹم قائم کرتا ہے.

گرادیئن مربع، دائرہ، لائن، متن وغیرہ کی بھرپائی کے لئے استعمال کئے جاسکتا ہے.

نکات:آپ اس آئیٹم کا استعمال کریں: strokeStyle یا fillStyle کی وجہ سے.

نکات:آپ استعمال کریں: addColorStop() میتھد کا کارکردگی مختلف رنگ، اور گرادیئن آئیٹم میں کس مقام پر رنگ کا پتا دینا ہے.

مثال

مزید دیکھئے:

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

آپ کا براؤزر 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);

خود سے کچھ تجربہ کریں.

بھرپائی کا پتا دینا ہے.

مقابل میزانی شمارا بہت سارا مراحل برائی کا پتا دینا ہے جو اس کی خصوصیت کا پورا تعاون دیتا ہے.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

تعليق:Internet Explorer 8 و الإصدارات الأقدم لا تدعم عنصر <canvas>.

دليل مرجعي لـ Canvas