HTML में एक आयत बनाने के लिए, कैनवास तत्व का उपयोग करें। कैनवास के साथ, आयत बनाने के लिए रेक्ट () विधि का उपयोग करें। लेकिन, एक गोल आयत बनाने के लिए, रेक्ट () विधि का उपयोग करने से काम नहीं चलेगा। हम एक गोलाकार आयत बनाने के लिए lineTo() और quadraticCurveTo() पद्धति का उपयोग करेंगे।
इस प्रकार आप HTML5 में कैनवास बना सकते हैं -
आप सीख सकते हैं कि कैनवास में एक गोल आयत कैसे बनाया जाता है
उदाहरण
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id="newCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById('newCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(80, 10);
ctx.quadraticCurveTo(90, 10, 90, 20);
ctx.lineTo(90, 80);
ctx.quadraticCurveTo(90, 90, 80, 90);
ctx.lineTo(20, 90);
ctx.quadraticCurveTo(10, 90, 10, 80);
ctx.lineTo(10, 20);
ctx.quadraticCurveTo(10, 10, 20, 10);
ctx.stroke();
</script>
</body>
</html> आउटपुट
