Chrome 99 之前常规操作：
ctx.beginPath();
ctx.moveTo(x+topLeft, y);
ctx.arcTo(x+width, y, x+width, y+height, topRight);
ctx.arcTo(x+width, y+height, x, y+height, bottomRight);
ctx.arcTo(x, y+height, x, y, bottomLeft);
ctx.arcTo(x, y, x+width, y, topLeft);
ctx.closePath();
ctx.fill();
其中x、y表示矩形的起点坐标，width、height分别表示矩形的宽、高，topLeft、topRight、bottomRight、bottomLeft分别表示矩形左上、右上、右下和左下圆角半径大小。
下面来解读一下arcTo()的语法，以ctx.arcTo(x1,y1,x2,y2,radi)为例。
第一部分
(x1,y1)坐标点，可以分成两块来理解，第一块我们可以理解为当前画笔停留的坐标点到(x1,y1)的一条直线，第二块我们可以理解为即将要绘制圆角的部位，也就是所在矩形的四个顶角的位置。
第二部分
(x2,y2)坐标点，也可以分成两块来理解，第一块我们可以理解为(x1,y1)坐标点到(x2,y2)的一条直线，这条直线与第一部分理解的直线形成一个夹角，那么圆角就绘制在这个夹角(内角)之间，并与夹角两边相切，第二块可以理解为画笔画完当前圆角最后所停留的坐标点。
第三部分
radi那就很容易理解了，也就是当前即将绘制的圆角的半径。
然后以此类推，完成圆角矩形的绘制。
Chrome 99之后一行代码：
ctx.roundRect(x, y, width, height, [topLeft, topRight, bottomRight, bottomLeft]);
ctx.fill();
最后可以做下兼容：
if (ctx.roundRect) {
ctx.roundRect(x, y, width, height, [topLeft, topRight, bottomRight, bottomLeft]);
}else {
ctx.beginPath();
ctx.moveTo(x+topLeft, y);
ctx.arcTo(x+width, y, x+width, y+height, topRight);
ctx.arcTo(x+width, y+height, x, y+height, bottomRight);
ctx.arcTo(x, y+height, x, y, bottomLeft);
ctx.arcTo(x, y, x+width, y, topLeft);
ctx.closePath();
}
