HTML | 画布 arcTo() 方法

简介

arcTo() 方法是 canvas 元素中的一个用于路径绘制的方法，用于绘制一条弧线段，路径的起点和终点被指定为两个坐标（x1,y1）和（x2,y2），中间则由控制点 (x3, y3) 定义。这种方法可以用于绘制一些有圆角的形状。

语法

context.arcTo(x1, y1, x2, y2, radius);

• x1: 起点x坐标
• y1: 起点y坐标
• x2: 终点x坐标
• y2: 终点y坐标
• radius: 圆角半径

示例

绘制一个圆角矩形

<canvas id="canvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(20, 10); // 设置起点
  ctx.lineTo(180, 10); // 顶部线段
  ctx.arcTo(190, 10, 190, 20, 10); // 右上圆角
  ctx.lineTo(190, 80); // 右侧线段
  ctx.arcTo(190, 90, 180, 90, 10); // 右下圆角
  ctx.lineTo(20, 90); // 底部线段
  ctx.arcTo(10, 90, 10, 80, 10); // 左下圆角
  ctx.lineTo(10, 20); // 左侧线段
  ctx.arcTo(10, 10, 20, 10, 10); // 左上圆角
  ctx.closePath(); // 封闭路径
  ctx.stroke(); // 绘制路径
</script>

效果如下：

绘制一个扇形

<canvas id="canvas2" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('canvas2');
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(100, 50); // 设置起点为圆心
  ctx.arcTo(150, 50, 150, 100, 50); // 绘制一条弧线段
  ctx.lineTo(100, 100); // 连接终点和扇形心点
  ctx.closePath(); // 封闭路径
  ctx.fillStyle = 'green'; // 设置填充颜色
  ctx.fill(); // 填充扇形
</script>

效果如下：

注意事项

• arcTo() 方法可以构建出任意的圆角形状，但是过多的弧线会使代码变得复杂，因此建议仅在需要圆角的情况下使用该方法。
• 由于路径将直接受到画布的变换而不是单独的变换，因此当画布被移动或缩放时，arcTo() 方法将呈现不同的路径。