html5边框为直线,将CSS3边框半径设置为HTML5 Canvas

这里的解决方案：

CanvasRenderingContext2D.prototype.roundRect=function(x,y,width,height,tl,tr,br,bl) {

var x1,x2,x3,x4,y1,y2,y3,y4,radii,ratio=0,CURVE2KAPPA=0.5522847498307934;

ratio=Math.min(Math.min(width/(tl+tr),width/(br+bl)),Math.min(height/(tl+bl),height/(tr+br)));

if ((ratio>0)&&(ratio<1)) {

tl*=ratio;

tr*=ratio;

bl*=ratio;

br*=ratio;

}

xw=x+width;

yh=y+height;

x1=x+tl;

x2=xw-tr;

x3=xw-br;

x4=x+bl;

y1=y+tr;

y2=yh-br;

y3=yh-bl;

y4=y+tl;

this.beginPath();

this.moveTo(x1,y);

this.lineTo(x2,y);

radii=CURVE2KAPPA*tr;

this.bezierCurveTo(x2+radii,y,xw,y1-radii,xw,y1);

this.lineTo(xw,y2);

radii=CURVE2KAPPA*br;

this.bezierCurveTo(xw,y2+radii,x3+radii,yh,x3,yh);

this.lineTo(x4,yh);

radii=CURVE2KAPPA*bl;

this.bezierCurveTo(x4-radii,yh,x,y3+radii,x,y3);

this.lineTo(x,y4);

radii=CURVE2KAPPA*tl;

this.bezierCurveTo(x,y4-radii,x1-radii,y,x1,y);

this.stroke();

}

ctx.roundRect(0,0,50,50,5,5,10,15);

ctx.strokeStyle="red";

ctx.roundRect(0,0,50,50,5000,500,100,150);

ctx.strokeStyle="blue";

ctx.roundRect(0,0,50,50,2500,250,50,75);

玩得开心。