Canvas fillStyle गुण

Canvas संदर्भ दस्तावेज

परिभाषा और उपयोग

fillStyle चित्र को भरने के लिए रंग, शीतलाई या पैटर्न को भरने के लिए गुण सेट करें या वापस करें।

उदाहरण

उदाहरण 1

नीले रंग से भरे वृत्ताकार को निर्धारित करें:

आपका ब्राउज़र कैनवस टैग को समर्थन नहीं देता है。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

स्वयं एक प्रयोग करें

सूचना:पृष्ठ के नीचे और भी उदाहरण मिलते हैं。

व्याकरण

context.fillStyle=रंग|ग्रेडिएंट|पैटर्न;

गुण मान

मान वर्णन
रंग ड्राइंग को भरने वाले रंग को संकेत करता है CSS रंग मान。मूलभूत मान #000000 है।
ग्रेडिएंट ड्राइंग को भरने के लिए उपयोग किए जाने वाले गेंदान ऑब्जैक्ट (रेखीययाविकिरण）。
पैटर्न ड्राइंग को भरने के लिए उपयोग किए जाने वाले पैटर्न ऑब्जैक्ट

तकनीकी विवरण

मूलभूत मान: #000000

और भी उदाहरण

उदाहरण 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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

स्वयं एक प्रयोग करें

उदाहरण 4

श्वेत से लेकर लाल और फिर श्वेत तक के बदलाव को निर्धारित करने के लिए गेंदान को भरने वाले रंगशैली के रूप में:

आपका ब्राउज़र कैनवस टैग को समर्थन नहीं देता है。

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

इसके लिए इस्तेमाल किए गए चित्र:

लैंप

चित्र का उपयोग करके ड्राइंग को भरने के लिए:

आपका ब्राउज़र HTML5 कैनवस टैग को समर्थन नहीं देता है。

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 संदर्भ दस्तावेज