JS कैनवस
In this page:
const canvas = document.getElementById("id");
const ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);Basic Rectangles बनाना
fillRect(x, y, width, height) एक filled rectangle बनाता है, strokeRect() सिर्फ उसकी outline बनाता है, और clearRect() एक rectangular area को वापस transparent कर देता है -- ये तीन सबसे साधारण drawing operations हैं, और अक्सर सबसे पहले सीखे जाते हैं।
उदाहरण: Drawing Basic Rectangles
<canvas id="c" width="150" height="100"></canvas>
<script>
// Declare the constant `ctx`, set to `document.getElementById("c").getContext("2d")`
const ctx = document.getElementById("c").getContext("2d");
// Call `ctx.fillRect(10, 10, 50, 30)`
ctx.fillRect(10, 10, 50, 30);
// Call `ctx.strokeRect(70, 10, 50, 30)`
ctx.strokeRect(70, 10, 50, 30);
// Call `ctx.clearRect(20, 15, 10, 10)`
ctx.clearRect(20, 15, 10, 10);
</script>Custom Paths बनाना
beginPath() एक नया shape शुरू करता है, moveTo(x, y) बिना draw किए drawing "pen" को move करता है, lineTo(x, y) current position से एक सीधी line draw करता है, और closePath() वापस शुरुआती point से जोड़ देता है -- साथ में, ये point by point कोई भी custom polygon shape बनाते हैं।
उदाहरण: Drawing Custom Paths
<canvas id="c" width="150" height="100"></canvas>
<script>
// Declare the constant `ctx`, set to `document.getElementById("c").getContext("2d")`
const ctx = document.getElementById("c").getContext("2d");
// Call `ctx.beginPath()`
ctx.beginPath();
// Call `ctx.moveTo(10, 10)`
ctx.moveTo(10, 10);
// Call `ctx.lineTo(100, 10)`
ctx.lineTo(100, 10);
// Call `ctx.lineTo(50, 80)`
ctx.lineTo(50, 80);
// Call `ctx.closePath()`
ctx.closePath();
// Call `ctx.stroke()`
ctx.stroke();
</script>Circles और Arcs बनाना
arc(x, y, radius, startAngle, endAngle) एक circular arc draw करता है -- angles के रूप में 0 से Math.PI * 2 पास करना एक पूरा circle draw करता है, जबकि दूसरी angle ranges partial arcs draw करती हैं, जो pie-slice shapes और गोल visual elements की बुनियाद है।
उदाहरण: Drawing Circles and Arcs
<canvas id="c" width="150" height="100"></canvas>
<script>
const ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2); // full circle
ctx.stroke();
</script>Text और Images बनाना
fillText(text, x, y) current font setting इस्तेमाल करके canvas पर सीधे text draw करता है, और drawImage(imageElement, x, y) एक पहले से loaded <img> element (या कोई दूसरा canvas) canvas पर draw करता है -- जो आपको graphics, photos, और labels एक साथ मिलाने देता है।
उदाहरण: Drawing Text and Images
<canvas id="c" width="150" height="100"></canvas>
<script>
// Declare the constant `ctx`, set to `document.getElementById("c").getContext("2d")`
const ctx = document.getElementById("c").getContext("2d");
// Assign "20px sans-serif" to `ctx.font`
ctx.font = "20px sans-serif";
// Call `ctx.fillText("Hello Canvas", 10, 50)`
ctx.fillText("Hello Canvas", 10, 50);
</script>एक Simple Animation Loop बनाना
requestAnimationFrame(callback) एक function को browser के अगले repaint से ठीक पहले चलने के लिए schedule करता है, display की refresh rate के साथ smoothly synced -- callback के अंदर ही इसे फिर से कॉल करना एक लगातार, कुशल animation loop बनाता है।
उदाहरण: Building a Simple Animation Loop
<canvas id="c" width="150" height="100"></canvas>
<script>
// Declare the constant `ctx`, set to `document.getElementById("c").getContext("2d")`
const ctx = document.getElementById("c").getContext("2d");
// Declare the variable `x`, set to `0`
let x = 0;
// Define the function `animate` with no parameters
function animate() {
// Call `ctx.clearRect(0, 0, 150, 100)`
ctx.clearRect(0, 0, 150, 100);
// Call `ctx.fillRect(x, 40, 20, 20)`
ctx.fillRect(x, 40, 20, 20);
x = (x + 1) % 150;
// Call `requestAnimationFrame(animate)`
requestAnimationFrame(animate);
}
// Call `animate()`
animate();
</script>- यह भूल जाना कि moveTo() और lineTo() जैसे path-drawing methods सिर्फ एक path define करते हैं -- कुछ भी actually render नहीं होता जब तक आप उसे paint करने के लिए fill() या stroke() कॉल न करें।
- animation में एक नया frame redraw करने से पहले clearRect() से canvas clear न करना, जिससे हर frame नई चीज़ replace करने के बजाय पिछली के ऊपर draw होता है।
- fillStyle (fill() से इस्तेमाल) को strokeStyle (stroke() से इस्तेमाल) से मिला देना और हैरान होना कि कोई color setting का कोई visible effect क्यों नहीं दिख रहा।
- getContext("2d") drawing context retrieve करता है, वह object जिस पर हर drawing method कॉल होता है।
- fillRect(), strokeRect(), और clearRect() सीधे simple rectangles draw, outline, और erase करते हैं।
- beginPath(), moveTo(), lineTo(), और closePath() custom shapes बनाते हैं, जिन्हें बाद में एक fill() या stroke() call से render किया जाता है।
Canvas 2D API हर modern browser में supported है और HTML5 से एक stable web standard रहा है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: