Để vẽ hình chữ nhật trong HTML, hãy sử dụng phần tử canvas. Với canvas, hãy sử dụng phương thức direct () để vẽ một hình chữ nhật. Tuy nhiên, để tạo một hình chữ nhật tròn, sử dụng phương thức direct () sẽ không hoạt động. Chúng tôi sẽ sử dụng phương thức lineTo () và quadraticCurveTo () để tạo một hình chữ nhật tròn.
Đây là cách bạn có thể tạo canvas trong HTML5 -
Bạn có thể tìm hiểu cách tạo hình chữ nhật tròn trong canvas
Ví dụ
<!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> Đầu ra
