HTML कैनवास निर्देशांक
कैनवास निर्देशांक
HTML कैनवास एक द्वि-आयामी ग्रिड है।
कैनवास के ऊपरी-बाएँ कोने में निर्देशांक (0,0) हैं
पिछले अध्याय में, आपने इस विधि का उपयोग देखा था: fillRect(0,0,150,75)।
इसका अर्थ है: ऊपरी-बाएँ कोने (0,0) से प्रारंभ करें और 150x75 पिक्सेल का आयत बनाएँ।
निर्देशांक उदाहरण
नीचे दिए गए आयत पर माउस ले जाकर उसके x और y निर्देशांक देखें:
एक रेखा खींचो
कैनवास पर एक सीधी रेखा खींचने के लिए, निम्न विधियों का उपयोग करें:
- moveTo( x,y ) - लाइन के शुरुआती बिंदु को परिभाषित करता है
- लाइनटो ( एक्स, वाई ) - लाइन के अंतिम बिंदु को परिभाषित करता है
वास्तव में रेखा खींचने के लिए, आपको "स्याही" विधियों में से एक का उपयोग करना चाहिए, जैसे स्ट्रोक ()।
उदाहरण
स्थिति में प्रारंभिक बिंदु (0,0), और स्थिति में समाप्ति बिंदु (200,100) परिभाषित करें। फिर वास्तव में रेखा खींचने के लिए स्ट्रोक () विधि का उपयोग करें:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
एक चक्र बनाएं
कैनवास पर एक वृत्त खींचने के लिए, निम्नलिखित विधियों का उपयोग करें:
- startPath () - एक पथ शुरू करता है
- चाप (x, y, r, startangle, endangle) - एक चाप/वक्र बनाता है। चाप () के साथ एक वृत्त बनाने के लिए: प्रारंभ कोण को 0 पर और अंत कोण को 2*Math.PI पर सेट करें। x और y पैरामीटर वृत्त के केंद्र के x- और y-निर्देशांक को परिभाषित करते हैं। आर पैरामीटर सर्कल के त्रिज्या को परिभाषित करता है।
उदाहरण
चाप () विधि के साथ एक वृत्त को परिभाषित करें। फिर वास्तव में वृत्त खींचने के लिए स्ट्रोक () विधि का उपयोग करें:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();