HTML कैनवास createLinearGradient () विधि
उदाहरण
एक ग्रेडिएंट (बाएं से दाएं) को परिभाषित करें जो काले से सफेद रंग में जाता है, जैसा कि आयत के लिए भरण शैली है:
जावास्क्रिप्ट:
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 | |||||
|---|---|---|---|---|---|
| createLinearGradient() | Yes | 9.0 | Yes | Yes | Yes |
परिभाषा और उपयोग
createLinearGradient () विधि एक रैखिक ढाल वस्तु बनाता है।
ग्रेडिएंट का उपयोग आयतों, वृत्तों, रेखाओं, पाठ आदि को भरने के लिए किया जा सकता है।
युक्ति: इस ऑब्जेक्ट का उपयोग स्ट्रोक शैली या भरण शैली गुणों के मान के रूप में करें ।
युक्ति: विभिन्न रंगों को निर्दिष्ट करने के लिए addColorStop() विधि का उपयोग करें , और ग्रेडिएंट ऑब्जेक्ट में रंगों को कहां रखें।
| जावास्क्रिप्ट सिंटैक्स: | संदर्भ .createLinearGradient( x0,y0,x1,y1 ); |
|---|
पैरामीटर मान
| Parameter | Description |
|---|---|
| x0 | The x-coordinate of the start point of the gradient |
| y0 | The y-coordinate of the start point of the gradient |
| x1 | The x-coordinate of the end point of the gradient |
| y1 | The y-coordinate of the end point of the gradient |
और ज्यादा उदाहरण
उदाहरण
आयत के लिए भरण शैली के रूप में एक ढाल (ऊपर से नीचे) को परिभाषित करें:
जावास्क्रिप्ट:
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);
उदाहरण
एक ग्रेडिएंट को परिभाषित करें जो काले, लाल से सफेद तक, आयत के लिए भरण शैली के रूप में जाता है:
जावास्क्रिप्ट:
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);
❮ HTML कैनवास संदर्भ