जावास्क्रिप्ट के माध्यम से कैनवास पर लाइनें ड्राइंग
आइए सरल से शुरू करें - लाइनें ड्राइंग करना। यह समझने के लिए कि यह कैसे किया जाता है, कल्पना करें कि आपके पास कागज की एक शीट और एक पेंसिल है। आप इस शीट पर ड्रा कर सकते हैं, या बिना ड्रा किए बस पेंसिल को वांछित बिंदु पर ले जा सकते हैं।
जावास्क्रिप्ट भी इसी तरह काम करता है: इसके पास एक पेंसिल (या ड्राइंग के लिए पेन) है,
वांछित स्थान पर आप इसे moveTo विधि का उपयोग करके ले जा सकते हैं,
और lineTo विधि का उपयोग करके ड्रा कर सकते हैं।
दोनों विधियाँ पैरामीटर के रूप में उस बिंदु को स्वीकार करती हैं, जहाँ पेन की नोक को ले जाना है - पहला पैरामीटर
क्षैतिज निर्देशांक, और दूसरा - ऊर्ध्वाधर निर्देशांक होता है। निर्देशांक की उत्पत्ति - बिंदु 0,
0 - तत्व का ऊपरी बायाँ कोना है।
जब पेन वांछित बिंदु पर ले जाया जाता है -
विधि moveTo केवल स्थानांतरित करती है, और
lineTo स्थानांतरित करने की प्रक्रिया में पेन की वर्तमान स्थिति से उस बिंदु तक एक रेखा खींचती है,
जहाँ यह स्थानांतरित होगा।
हालाँकि, यदि ऊपर दिया गया कोड चलाया जाता है
- कुछ भी नहीं होगा: दो और कमांड लिखना आवश्यक है: पहली कमांड beginPath
लाइन ड्राइंग शुरू करने से पहले निर्दिष्ट की जानी चाहिए, और दूसरी कमांड stroke
moveTo और lineTo के सभी संयोजनों के बाद कॉल की जानी चाहिए ताकि लाइन खिंच सके।
तो, आइए एक लाइन ड्रा करने के लिए कार्यशील कोड लिखें:
आइए एक रेखा खींचते हैं
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
आइए एक चिड़िया बनाते हैं
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
आइए एक त्रिकोण बनाते हैं
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
Результат:
आइए एक वर्ग बनाते हैं
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
Результат:
आकृतियों को बंद करना
एक बंद आकृति बनाने के लिए सभी रेखाएँ बनाना जरूरी नहीं है -
अंतिम रेखा स्वचालित रूप से बन सकती है और आकृति को बंद कर सकती है।
इसके लिए stroke विधि से पहले
closePath विधि को कॉल करना चाहिए।
यह विधि अंतिम बिंदु से प्रारंभिक बिंदु तक एक सीधी रेखा खींचकर आकृति को बंद करने का प्रयास करती है। यदि आकृति पहले से ही बंद थी या केवल एक बिंदु है, तो विधि कुछ नहीं करती।
आइए closePath का उपयोग करके एक त्रिकोण बनाएं:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - इस चरण को छोड़ देते हैं
ctx.closePath();
ctx.stroke();
Результат:
आकृतियों को रंग भरना
stroke विधि के बजाय
fill विधि का उपयोग किया जा सकता है - इस मामले में आकृति को
पूरी तरह से बंद होना जरूरी नहीं है - यह वैसे ही रंग भर देगी:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - इस चरण को छोड़ देते हैं
//ctx.closePath(); - और यह भी
ctx.fill();
Результат: