如何在HTML画布上绘制圆角矩形？

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

下面是如何在 HTML5 中创建画布——

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

示例

Open Compiler
<!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>

输出

更新于：2021 年 12 月 16 日

2K+ 浏览

职业生涯起航

完成课程获得认证

开始
广告