HTML कैनवास ग्रेडिएंट
कैनवास - ग्रेडिएंट
आयतों, वृत्तों, रेखाओं, पाठों आदि को भरने के लिए ढालों का उपयोग किया जा सकता है। कैनवास पर आकृतियाँ ठोस रंगों तक सीमित नहीं हैं।
दो अलग-अलग प्रकार के ग्रेडिएंट हैं:
- createLinearGradient( x,y,x1,y1 ) - एक रैखिक ढाल बनाता है
- createRadialGradient( x,y,r,x1,y1,r1 ) - एक रेडियल/सर्कुलर ग्रेडिएंट बनाता है
एक बार जब हमारे पास एक ग्रेडिएंट ऑब्जेक्ट होता है, तो हमें दो या अधिक रंग स्टॉप जोड़ने होंगे।
AddColorStop () विधि रंग स्टॉप और ग्रेडिएंट के साथ इसकी स्थिति को निर्दिष्ट करती है। ढाल की स्थिति 0 से 1 के बीच कहीं भी हो सकती है।
ग्रेडिएंट का उपयोग करने के लिए, फिल स्टाइल या स्ट्रोक स्टाइल प्रॉपर्टी को ग्रेडिएंट पर सेट करें, फिर आकृति (आयत, टेक्स्ट या एक रेखा) बनाएं।
createLinearGradient का उपयोग करना ()
उदाहरण
एक रैखिक ढाल बनाएँ। आयत को ढाल से भरें:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
createRadialGradient() का उपयोग करना:
उदाहरण
एक रेडियल/गोलाकार ग्रेडिएंट बनाएं। आयत को ढाल से भरें:
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);