canvas绘制一个圆角的方形

我们使用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();
    }
}

在线展示