html中圆角矩形怎么写 如何在HTML画布上绘制圆角矩形？

要在HTML中绘制矩形，请使用canvas元素。对于画布，请使用该rect()方法绘制矩形。但是，对于创建圆角矩形，使用该rect()方法将不起作用。我们将使用lineTo()andquadraticCurveTo()方法创建一个圆角矩形。

这是您可以在HTML5中创建画布的方式-

您可以学习如何在画布中创建圆角矩形

示例

HTML>

HTML5CanvasTag

varcanvas=document.getElementById('newCanvas');

varctx=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();