JS ग्राफिक्स
In this page:
JavaScript Graphics क्या कर सकते हैं
मौजूदा HTML elements को style करने से आगे, JavaScript graphics tools आपको बिल्कुल custom visuals बनाने देते हैं -- charts, game sprites, data visualizations, generated patterns -- सीधे एक drawing surface पर, pixel by pixel, पूरे programmatic control के तहत।
उदाहरण: What JavaScript Graphics Can Do
<canvas id="chart" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById("chart").getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 50, 50); // pixel-level drawing, not just styled HTML
</script>एक Drawing Surface के रूप में Canvas Element
एक <canvas> element मूल रूप से page में एक खाली rectangular area है जिसका अपना कोई visual content नहीं है -- यह तभी उपयोगी बनता है जब JavaScript इसका drawing context लेता है और इसके खिलाफ drawing commands भेजना शुरू करता है।
उदाहरण: The Canvas Element as a Drawing Surface
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById("myCanvas"); // blank until drawn on
const ctx = canvas.getContext("2d");
ctx.fillRect(20, 20, 100, 50);
</script>Data को Visually Render करना
static shapes से आगे, canvas आमतौर पर data-driven visuals render करने के लिए इस्तेमाल होता है -- values की किसी array से बने bar charts, समय के साथ trends plot करने वाले साधारण line graphs -- हर बार underlying data बदलने पर pixel positions calculate करते हुए।
उदाहरण: Rendering Data Visually
<canvas id="chart" width="200" height="100"></canvas>
<script>
// Declare the constant `data`, set to `[30, 80, 45, 60]`
const data = [30, 80, 45, 60];
// Declare the constant `ctx`, set to `document.getElementById("chart").getContext("2d")`
const ctx = document.getElementById("chart").getContext("2d");
// Call `data.forEach((value, i) => ctx.fillRect(i * 40, 100 - value, 30, value))`
data.forEach((value, i) => ctx.fillRect(i * 40, 100 - value, 30, value));
</script>Hand-Rolled Drawing बनाम एक Library इस्तेमाल करना
किसी साधारण shape या एक one-off visualization के लिए raw Canvas API calls लिखना उचित है, पर axes, labels, legends, tooltips, और animations वाले आम chart types (bar, line, pie, scatter) के लिए, Chart.js जैसी library उतनी complexity संभालती है जो आपको वरना खुद बनानी पड़ती।
उदाहरण: Hand-Rolled Drawing vs Using a Library
<canvas id="c1" width="100" height="100"></canvas>
<script>
// Call `document.getElementById("c1").getContext("2d").fillRect(10, 10, 50, 50)`
document.getElementById("c1").getContext("2d").fillRect(10, 10, 50, 50);
</script>
<!-- For real charts with axes/legends/tooltips, use a library like Chart.js instead -->Canvas और दूसरे Graphics Approaches में चुनना
Canvas pixel-based, बार-बार redraw होने वाली, या animated graphics (games, live data visualizations) के लिए सबसे उपयुक्त है; SVG अक्सर उन graphics के लिए बेहतर fit है जिन्हें resolution-independent और individually interactive रहना है, क्योंकि canvas pixels के उलट SVG shapes असली, selectable DOM elements बने रहते हैं।
उदाहरण: Choosing Between Canvas and Other Graphics Approaches
<canvas id="pixels" width="50" height="50"></canvas>
<svg width="50" height="50"><circle cx="25" cy="25" r="20" fill="green"/></svg>- यह मान लेना कि अकेला CSS canvas की तरह arbitrary shapes और animations draw कर सकता है -- CSS existing elements को style करता है, free-form pixel drawing नहीं।
- यह भूल जाना कि canvas पर draw की गई हर चीज़ सिर्फ pixels हैं, individual shapes की कोई memory नहीं -- आप बाद में 'पहले draw किया circle' को किसी DOM element की तरह select या move नहीं कर सकते।
- raw Canvas API calls से complex chart rendering hand-roll करना चुनना जब Chart.js जैसी एक well-tested library significant time बचा सकती और edge cases पहले से handle कर सकती।
- Canvas API shapes, images, text, और animations के लिए एक JavaScript-controlled drawing surface देता है।
- Canvas drawings pixel-based हैं, object-based नहीं -- एक बार draw होने के बाद, individual shapes को redraw किए बिना independently select या move नहीं किया जा सकता।
- Chart.js और similar libraries canvas के ऊपर build होती हैं ताकि low-level drawing code hand-write किए बिना common chart types handle कर सकें।
Canvas API हर modern browser में supported है; Chart.js वहीं काम करता है जहाँ canvas काम करता है, क्योंकि यह अंदर ही अंदर canvas के ज़रिए render होता है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: