JavaScript पर canvas में लाइन का रंग बदलना

आइए अब कंटूर और भराई का रंग बदलना सीखें। इसके लिए निम्नलिखित गुण हैं: गुण strokeStyle कंटूर का रंग सेट करता है, और गुण fillStyle - भराई का रंग। रंग सामान्य CSS फॉर्मेट में सेट किए जाते हैं।

उदाहरण

आइए rect की मदद से एक कंटूर बनाएं और उसे लाल रंग में रंगें:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

उदाहरण

आइए rect की मदद से एक वर्ग बनाएं और उसे हरे रंग में रंगें:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

टिप्पणी

महत्वपूर्ण: जब आप strokeStyle या fillStyle सेट करते हैं, नया मान उन सभी आकृतियों पर लागू होगा जो इस क्षण से बनाई जाएंगी। प्रत्येक आकृति के लिए, जिसके लिए आपको दूसरे रंग की आवश्यकता है, आपको fillStyle या strokeStyle का मान फिर से सेट करना होगा।

व्यावहारिक कार्य