canvas绘制圆角矩形

首先声明一个自定义函数

        //绘制圆角矩形
        roundRect(ctx, x, y, w, h, r) {
            ctx.save();
            if (w < 2 * r) {r = w / 2;}
            if (h < 2 * r){ r = h / 2;}
            ctx.beginPath();
            ctx.setStrokeStyle('white');
            ctx.setFillStyle('white')
            ctx.setLineWidth(4);
            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.stroke();
            ctx.closePath();
            ctx.draw(true);
        },

然后在绘制的时候调用该函数，

效果图：