HTML कैनवस createLinearGradient() मेथोड

HTML5 कैनवस संदर्भ निर्देशिका

व्यावहार्यता और निर्धारण

createLinearGradient() मेथोड लाइनियर रंग बदलाव ऑब्जैक्ट को बनाता है。

gradient चित्र, वृत्त, रेखाएँ, पाठ आदि को भरने के लिए उपयोग कर सकते हैं。

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

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

HTML5 कैनवस संदर्भ निर्देशिका