canvas绘制圆角矩形

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d"); 
canvas.width=800;
canvas.height=800;

//绘制圆角矩形路径
function pathRoundRect(ctx,width,height,r){
    ctx.beginPath();
    ctx.arc(width-r,height-r,r,0,Math.PI/2);
    ctx.lineTo(r,height);
    ctx.arc(r,height-r,r,Math.PI/2,Math.PI);
    ctx.lineTo(0,r);
    ctx.arc(r,r,r,Math.PI,Math.PI/2*3);
    ctx.lineTo(width-r,0);
    ctx.arc(width-r,r,r,Math.PI/2*3,Math.PI*2)
    ctx.closePath();
}

function strokeRoundRect(ctx,x,y,width,height,r,lineWidth,strokeColor){
    if(2*r>width||2*r>height){
        return;
    }   //判断输入圆角的半径是否合理
    ctx.save();
    ctx.translate(x,y);
    pathRoundRect(ctx,width,height,r);
    ctx.lineWidth=lineWidth||10;      //lineWidth,strokeColor是可选参数
    ctx.strokeStyle=strokeColor||"black";
    ctx.stroke();
    ctx.restore();
}
// 调用 strokeRoundRect(ctx,100,100,600,500,50,20,"red")
function fillRoundRect(ctx,x,y,width,height,r,fillColor){
    if(2*r>width||2*r>height){
        return;
    }   //判断输入圆角的半径是否合理
    ctx.save();
    ctx.translate(x,y);
    pathRoundRect(ctx,width,height,r);
    ctx.fillStyle=fillColor||"black";  //fillColor是可选参数
    ctx.fill();
    ctx.restore();
}

// 调用fillRoundRect(ctx,100,100,600,500,50,"red")

// 调用 strokeRoundRect(ctx,100,100,600,500,50,20,"red")

转载于:https://my.oschina.net/u/3373793/blog/869830