Canvas createLinearGradient() विधि

रूपरेखा और उपयोग

createLinearGradient() मेथड एक लीनियर ग्रेडिएंट ऑब्जैक्ट बनाता है।

ग्रेडिएंट को वर्ग, गोल, रेखाएँ, पाठ आदि को भरने के लिए इस्तेमाल किया जा सकता है。

सूचना:इस ऑब्जैक्ट को 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

टिप्पणी:Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को समर्थन नहीं देते हैं。