Canvas绘制圆角矩形按钮

效果图

drawButton(ctx,color,x,y,width,height,radius,text){//x/y:按钮起始点,width/height按钮宽高,radius弧度
        //分为4条直线4个圆角绘制
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.moveTo(x+radius,y);
        ctx.lineTo(x+width-radius,y);
        ctx.arc(x+width-radius,y+radius,radius,Math.PI*3/2, Math.PI*2);
        ctx.lineTo(x+width,y+height-radius);
        ctx.arc(x+width-radius,y+height-radius,radius,Math.PI,Math.PI/2);
        ctx.lineTo(x+radius,y+height);
        ctx.arc(x+radius,y+height-radius,radius,Math.PI/2,Math.PI);
        ctx.lineTo(x,y+radius);
        ctx.arc(x+radius,y+radius,radius,Math.PI,Math.PI*3/2);
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.font = 13*4+"px 黑体";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(text,x+width/2,y+height/2);
}