HTML Graphics का मतलब है web pages पर visual content जैसे shapes, drawings, charts और images को programmatically draw करना।
HTML में graphics के लिए मुख्य रूप से Canvas और SVG का use किया जाता है।
ये दोनों technologies interactive और dynamic graphics बनाने में मदद करती हैं।
HTML Canvas
<canvas> element JavaScript के साथ मिलकर graphics draw करने के लिए use होता है।
Canvas pixel-based होता है।
<canvas id="myCanvas" width="300" height="150"></canvas>
Canvas अपने आप कुछ draw नहीं करता, drawing के लिए JavaScript जरूरी होती है।
Canvas का Use कहाँ होता है?
Games बनाने में
Charts और graphs बनाने में
Image editing tools में
Animations और visual effects में
Simple Canvas Drawing Example
<canvas id="box" width="200" height="100"></canvas>
<script>
var c = document.getElementById("box");
var ctx = c.getContext("2d");
ctx.fillRect(20, 20, 150, 60);
</script>
यह example canvas पर एक rectangle draw करता है।
Canvas Text Drawing
Canvas पर text भी draw किया जा सकता है।
ctx.font = "20px Arial";
ctx.fillText("Hello HTML", 30, 50);
Canvas Images
Canvas में images draw की जा सकती हैं।
var img = new Image();
img.src = "photo.jpg";
ctx.drawImage(img, 10, 10);
HTML SVG
SVG (Scalable Vector Graphics) vector-based graphics के लिए use होता है।
SVG resolution-independent होता है और zoom करने पर quality खराब नहीं होती।
<svg width="200" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
SVG के फायदे
High quality scalable graphics
CSS और JavaScript से control किया जा सकता है
Small file size
Better accessibility support
SVG Shapes
Rectangle
<rect x="10" y="10" width="100" height="50" fill="blue" />
Line
<line x1="0" y1="0" x2="200" y2="100" stroke="black" />
Ellipse
<ellipse cx="100" cy="50" rx="80" ry="30" fill="green" />
Canvas vs SVG
Canvas pixel-based है
SVG vector-based है
Canvas real-time graphics के लिए better है
SVG static graphics और icons के लिए better है
HTML Graphics कहाँ use करें?
Games और animations के लिए Canvas
Icons, logos और diagrams के लिए SVG
Charts के लिए Canvas या SVG दोनों
Interactive UI elements के लिए SVG
HTML Graphics Summary
HTML Graphics visual content create करने के लिए use होते हैं
Canvas dynamic और fast rendering देता है
SVG scalable और high-quality graphics देता है
Use-case के हिसाब से सही option चुनना चाहिए