HTML कैनवस ग्रेडिएंट

कैनवस - गामा

गामा चतुर्भुज, वृत्त, रेखा, पाठ आदि को भरने के लिए उपयोग किया जा सकता है। कैनवस पर की रूपरेखाएँ शुद्ध रंग के रूप में सीमित नहीं होती हैं。

दो भिन्न प्रकार के गामा हैं:

• createLinearGradient(x,y,x1,y1) - लाइनियर गामा बनाया जाता है
• createRadialGradient(x,y,r,x1,y1,r1) - दूरी/वृत्ताकार गामा बनाया जाता है

जब हमें गामा ऑब्जैक्ट हो जाता है, तो दो या अधिक रंग-सूचक जोड़ना आवश्यक है。

addColorStop() विधा रंग के स्थगन को और उसके गामे में की जगह को निर्धारित करती है। गामे की जगह 0 से 1 के बीच का किसी भी स्थान हो सकता है。

गामे का उपयोग करने के लिए fillStyle या strokeStyle गुण को गामे में सेट करें और रूपरेखा (चतुर्भुज, पाठ या रेखा) दूरी चित्रित करें।

createLinearGradient() का उपयोग करके

उदाहरण

लाइनियर गामा बनाया जाता है। गामे से चतुर्भुज को भराया जाता है:

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

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// गामा बनाया जाता है
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// उसी गामे भराया जाता है
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

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

createRadialGradient() का उपयोग करके:

उदाहरण

दूरी/वृत्ताकार गामा बनाया जाता है। गामे से चतुर्भुज को भराया जाता है:

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

const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// गामा बनाया जाता है
const grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// उसी गामे भराया जाता है
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

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

अन्य संदर्भः

CodeW3C.com का पूरा Canvas संदर्भ मानचित्र