我们使用canvas绘制一个方形的方法是
ctx.rect(left, top, width, height);
现在我们想绘制一个半径为r的方形，只需要在方形对应的4个边角各绘制一个圆弧即可，canva会自动将上一个圆弧的终点与下一个圆弧的终点连接起来，closePath可以将第四个圆弧的终点与第一个圆弧的起点连接起来，具体思路参考下面这张丑陋的图片
实现
const radiusRect = (left, top, width, height, r) => {
const pi = Math.PI;
ctx.beginPath();
const radiusRect = (left, top, width, height, r) => {
const pi = Math.PI;
ctx.beginPath();
ctx.arc(left + r, top + r, r, - pi, -pi / 2);
ctx.arc(left + width - r, top + r, r, -pi / 2, 0);
ctx.arc(left + width - r, top + height - r, r, 0, pi / 2);
ctx.arc(left + r, top + height - r, r, pi / 2, pi);
ctx.closePath();
}
}
