HTML कैनवास addColorStop () विधि
उदाहरण
एक ग्रेडिएंट को परिभाषित करें जो काले से सफेद रंग में जाता है, आयत के लिए भरण शैली के रूप में:
जावास्क्रिप्ट:
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);
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से विधि का समर्थन करता है।
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
परिभाषा और उपयोग
AddColorStop () विधि ग्रेडिएंट ऑब्जेक्ट में रंग और स्थिति निर्दिष्ट करती है।
AddColorStop() विधि का उपयोग createLinearGradient() या createRadialGradient() के साथ किया जाता है ।
नोट: आप ग्रेडिएंट बदलने के लिए addColorStop() मेथड को कई बार कॉल कर सकते हैं। यदि आप ग्रेडिएंट ऑब्जेक्ट के लिए इस विधि को छोड़ देते हैं, तो ग्रेडिएंट दिखाई नहीं देगा। दृश्यमान ढाल के लिए आपको कम से कम एक रंग स्टॉप बनाने की आवश्यकता है।
| जावास्क्रिप्ट सिंटैक्स: | ढाल .addColorStop ( रोकें , रंग ); |
|---|
पैरामीटर मान
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
और ज्यादा उदाहरण
उदाहरण
कई addColorStop () विधियों के साथ एक ग्रेडिएंट को परिभाषित करें:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop("0.3", "magenta");
grd.addColorStop("0.5", "blue");
grd.addColorStop("0.6", "green");
grd.addColorStop("0.8", "yellow");
grd.addColorStop(1, "red");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);
❮ HTML कैनवास संदर्भ