HTML कैनवस strokeStyle गुण

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

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

strokeStyle पेंसिल के रंग, ग्रेडिएंट या मॉडल को नियंत्रित करने या प्रदर्शित करने के लिए गुण

उदाहरण

उदाहरण 1

एक चतुर्भुज बनाएं। नीले रंग के पेंसिल का उपयोग करें:

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

जावास्क्रिप्ट:

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

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

व्याकरण

context.strokeStyle=color|gradient|पैटर्न;

गुण

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

तकनीकी विवरण

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

और उदाहरण

उदाहरण 2

एक चतुर्भुज बनाएं। ग्रेडिएंट पेंसिल का उपयोग करें:

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

जावास्क्रिप्ट:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// ग्रेडिएंट के द्वारा भरना
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

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

उदाहरण 3

पाठ "codew3c.com" को एक ग्रेडिएंट पेंसिल से लिखें:

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

जावास्क्रिप्ट:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// ग्रेडिएंट बनाएं
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// ग्रेडिएंट के द्वारा भरना
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);

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

ब्राउज़र समर्थन

तालिका में उल्लिखित संख्याएं पहली बार इस गुण को पूरी तरह से समर्थन करने वाले ब्राउज़र का संस्करण को सूचित करती हैं。

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

टिप्पणी：Internet Explorer 8 और उससे पहले की संस्करण नहीं <canvas> एलीमेंट का समर्थन करते हैं。

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