What is the HTML Graphics?
HTML Graphics Web Pages पर Graphical Content को बनाने और Display करने के लिए Hypertext Markup Language (HTML) में विभिन्न Elements और Techniques का उपयोग करता है। HTML में कई सामान्य Elements और Attributes होते हैं जिनके द्वारा Graphics को शामिल किया और Modified किया जा सकता है।
What is Canvas Element?
- <canvas> Element का उपयोग JavaScript जैसी Scripting Language का उपयोग करके Graphics बनाने के लिए किया जाता है।
- <Canvas> Element Graphics के लिए केवल एक Container है, Graphics बनाने के लिए आपको एक Scripting Language की आवश्यकता होती है।
- <Canvas> Element 2D Shapes और Bitmap Images के Dynamic और scriptable rendering की अनुमति देता है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Example Canvas Element</h1>
<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
</body>
</html>
What is SVG Element?
- <svg> Element SVG Graphic के लिए एक Container को Define करता है।
- SVG में Path, Box, Circle, Text और Graphics Image बनाने के कई तरीके हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<title>SVG Element</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h1>Example SVG Element</h1>
<p>Draw a rectangle</p>
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);
stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
Trending Today
Facebook
Pinterest
LinkedIn
WhatsApp
