html5 h5使用canvas 画一个圆角矩形

最新推荐文章于 2022-05-12 16:08:26 发布

twinkle||cll

最新推荐文章于 2022-05-12 16:08:26 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html5 工具库，demo

本文链接：https://blog.csdn.net/qq_41499782/article/details/106155402

工具库，demo 同时被 2 个专栏收录

29 篇文章

订阅专栏

html5

9 篇文章

订阅专栏

本文详细介绍了如何使用HTML5 Canvas API绘制带有圆角的矩形，通过四个arcTo方法来实现圆滑的转角效果，每个arcTo方法定义了一个圆角的大小和位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用canvas画圆角矩形（4条边， 4个角）
ctx.moveTo 先设置起点A点下面的（x,y）是B点，（x1, y1）是C点方向，往哪边边拐
ctx.arcTo(x, y, x1, y1, 圆角大小) B点是A点与C点在圆弧上切线的交点，

  <canvas id="can" width="500" height="300"></canvas>

<script>
  var canvas = document.getElementById('can');
  var ctx = canvas.getContext("2d");
  ctx.moveTo(100, 110);  // 设置起点，为啥y轴要110.， 因为拐角的为10，所以往下移动10个像素单位
  ctx.arcTo(100, 200, 200, 200, 10); // 确定好第一个点后， 第二个点是沿着y轴，向下，并且C点是严重水平轴，拐角大小为10个单位， 其他三个都是一样的道理
  ctx.arcTo(200, 200, 200, 100, 10);
  ctx.arcTo(200, 100, 100, 100, 10);
  ctx.arcTo(100, 100, 100, 200, 10);
  ctx.stroke();
</script>