HTML कैनवस fillStyle गुण
डिफाइन और उपयोग
fillStyle गारिंट सेट करने या लॉग करने के लिए ड्राइंग को भरने के लिए रंग, ग्रेडिएंट या पैटर्न को डिफाइन करें。
उदाहरण
उदाहरण 1
नीले रंग से भरे वृत्ताकार को डिफाइन करें:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
सूचना:पान के नीचे और अधिक उदाहरण मिलेगा。
व्याकरण
context.fillStyle=color|gradient|pattern;
प्रयोग वैल्यू
| मूल्य | वर्णन |
|---|---|
| color | ड्राइंग को भरने के लिए रंग को संकेत करने के लिए CSS रंग वैल्यू। डिफॉल्ट वैल्यू है #000000。 |
| gradient | ड्राइंग को भरने के लिए ग्रेडिएंट ऑब्जैक्ट (रेखीययारेडियोटाइड) |
| pattern | ड्राइंग को भरने के लिए पैटर्न ऑब्जैक्ट |
तकनीकी विवरण
| डिफॉल्ट वैल्यू: | #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
इस्तेमाल किए जाने वाले चित्र:
चित्र का उपयोग करके ड्राइंग को भरने के लिए:
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> एलीमेंट को समर्थन नहीं देते हैं。
