JavaScript पर canvas में लाइन का रंग बदलना
आइए अब कंटूर और भराई का रंग बदलना सीखें।
इसके लिए निम्नलिखित गुण हैं:
गुण strokeStyle कंटूर का रंग सेट करता है,
और गुण fillStyle
- भराई का रंग। रंग सामान्य
CSS
फॉर्मेट में सेट किए जाते हैं।
उदाहरण
आइए rect की मदद से एक कंटूर बनाएं
और उसे लाल रंग में रंगें:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
:
उदाहरण
आइए rect की मदद से एक वर्ग बनाएं
और उसे हरे रंग में रंगें:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
:
टिप्पणी
महत्वपूर्ण: जब आप strokeStyle
या fillStyle सेट करते हैं,
नया मान उन सभी आकृतियों पर लागू होगा
जो इस क्षण से बनाई जाएंगी। प्रत्येक आकृति के लिए, जिसके लिए
आपको दूसरे रंग की आवश्यकता है, आपको
fillStyle या strokeStyle का मान
फिर से सेट करना होगा।
