canvas绘制圆角矩形

要绘制圆角矩形，可以使用 canvas 的 arcTo 方法，具体步骤如下：

1. 使用 beginPath 方法开启绘制路径。

2. 使用 moveTo 方法移动到起始点，通常是矩形的左上角。

3. 使用 lineTo 方法绘制矩形上边线的右端点。

4. 使用 arcTo 方法绘制右上角圆弧。

5. 使用 lineTo 方法绘制矩形右边线的下端点。

6. 使用 arcTo 方法绘制右下角圆弧。

7. 使用 lineTo 方法绘制矩形下边线的左端点。

8. 使用 arcTo 方法绘制左下角圆弧。

9. 使用 lineTo 方法绘制矩形左边线的上端点。

10. 使用 closePath 方法关闭路径，完成绘制。

下面是一个绘制圆角矩形的示例代码：

function drawRoundRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + radius, radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
  ctx.lineTo(x + radius, y + height);
  ctx.arcTo(x, y + height, x, y + height - radius, radius);
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);
  ctx.closePath();
  ctx.stroke();
}

其中，ctx 是 CanvasRenderingContext2D 对象，x、y 是矩形左上角的坐标，width、height 是矩形的宽度和高度，radius 是圆角的半径。使用 stroke 方法可以绘制路径的边框，使用 fill 方法可以填充路径的内部。