canvas使用

使用 arcTo 绘制圆角矩形

原来 Canvas 也能直接绘制圆角矩形了 - 掘金 (juejin.cn)

(234条消息) 在Canvas中绘制圆角矩形_canvas画圆角矩形_Sarkuya的博客-CSDN博客

// 绘制圆角矩形
roundRect(ctx, x, y, w, h, r){
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + w, y, x + w, y + h, r);
    ctx.arcTo(x + w, y + h, x, y + h, r);
    ctx.arcTo(x, y + h, x, y, r);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.closePath(); //或者 ctx.stroke();
}

roundRect(ctx, 50, 50, 538, 444, 16)

如果圆角半径传入数组，白色背景右上角会有点变化。如下：

roundRect(ctx, 50, 50, 538, 444, [16])