要在HTML中绘制矩形,请使用canvas元素。对于画布,请使用该rect()
方法绘制矩形。但是,对于创建圆角矩形,使用该rect()
方法将不起作用。我们将使用lineTo()
andquadraticCurveTo()
方法创建一个圆角矩形。
这是您可以在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>