canvas 画圆角矩形

圆角矩形

shui

function drawRoundedRect(ctx, x, y, width, height, r, fill, stroke) {
            ctx.save(); ctx.beginPath(); // draw top and top right corner 
            ctx.moveTo(x + r, y);
            ctx.arcTo(x + width, y, x + width, y + r, r); // draw right side and bottom right corner 
            ctx.arcTo(x + width, y + height, x + width - r, y + height, r); // draw bottom and bottom left corner 
            ctx.arcTo(x, y + height, x, y + height - r, r); // draw left and top left corner 
            ctx.arcTo(x, y, x + r, y, r);
            if (fill) { ctx.fill(); }
            if (stroke) { ctx.stroke(); }
            ctx.restore(); 
        }

。。。 hhhh 代码这个是别处复制的

使用

drawRoundedRect(ctx, 40, 40, 240, 240, 8, true, false)

其实也可以搞到原型上 这样跟自带的一样方便使用