HTML कैनवस कोआर्डिनेट

कैनवस निर्देशांक

HTML कैनवस एक दो-आयामी ग्रिड है।

कैनवस के शीर्ष-दक्षिण कोण के निर्देशांक (0,0) हैं।

पिछले अध्याय में, हमने फ़ंक्शन इस्तेमाल किया: fillRect(0,0,150,75);

अर्थात: शीर्ष-दक्षिण कोण (0,0) से 150x75 पिक्सल का वर्ग चित्रित करें।

निर्देशांक उदाहरण

नीचे दिए गए वर्ग पर माउस को ले जाकर उसके x और y सतह को देखें:

X
Y

रेखा चित्रित करें

कैनवस पर रेखा को चित्रित करने के लिए नीचे दिए गए तरीकों का इस्तेमाल करें:

  • moveTo(x,y) - रेखा के शुरू को परिभाषित करें
  • lineTo(x,y) - रेखा के अंत को परिभाषित करें

रेखा को वास्तव में चित्रित करने के लिए 'रंग' फ़ंक्शनों में से एक का इस्तेमाल करें, जैसे stroke()。

आपका ब्राउज़र HTML5 कैनवस टैग को समर्थित नहीं करता है。

उदाहरण

स्थान (0,0) में शुरू को परिभाषित करें, स्थान (200,100) में अंत को परिभाषित करें। फिर stroke() फ़ंक्शन को वास्तव में रेखा को चित्रित करने के लिए इस्तेमाल करें:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

स्वयं आजमाएं

वृत्त चित्रित करें

कैनवस पर वृत्त को चित्रित करने के लिए नीचे दिए गए तरीकों का इस्तेमाल करें:

  • beginPath() - एक रास्ता शुरू करें
  • arc(x,y,r,startangle,endangle) - वृत्ताकार गोलाकार रेखा/गोलाकार रेखा

arc() के द्वारा वृत्त बनाने के लिए इस प्रकार करें: कर्मांतरण को 0 निर्धारित करें, समाप्त कोण को 2 * Math.PI निर्धारित करें। x और y पारामीटर वृत्त के केंद्र के x और y सतह को निर्धारित करते हैं। r पारामीटर वृत्त के व्यास को निर्धारित करता है।

आपका ब्राउज़र HTML5 कैनवस टैग को समर्थित नहीं करता है。

उदाहरण

arc() फ़ंक्शन के द्वारा एक वृत्त को परिभाषित करें। फिर arc() फ़ंक्शन को वास्तव में वृत्त को दूरी बनाने के लिए इस्तेमाल करें:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

स्वयं आजमाएं

दूसरे को देखें:

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