Bán kính đường viền CSS3 cho Canvas HTML5

Question

Tôi đang cố tạo lại bán kính đường viền CSS3 trong canvas.

Thật dễ dàng để vẽ hình chữ nhật tròn nhưng trong CSS, giá trị của mỗi đường viền có thể cao.

Ví dụ:
HTML

<div class="normal_radius"></div> 
<div class="high_radius"></div> 
<div class="high2_radius"></div> 

CSS

div { height:50px;width:50px;position:absolute;top:10px; } 
.normal_radius { 
    border: 1px solid black; 
    border-radius: 5px 5px 10px 15px; 
    left: 10px; 
} 
.high_radius { 
    border: 1px solid red; 
    border-radius: 5000px 500px 100px 150px; 
    left: 80px; 
} 
.high2_radius { 
    border: 1px solid blue; 
    border-radius: 2500px 250px 50px 75px; 
    left: 160px; 
} 

Dưới đây là một jsfiddle

màu đen, bình thường giá trị bán kính biên giới, tôi có thể tái tạo đó. Giá trị màu đỏ, cao cho bán kính biên giới, tôi không biết cách tái tạo. Và màu xanh, giá trị cao chia cho 2, cùng một kết quả của màu đỏ.

Câu hỏi của tôi rất đơn giản, cách tái tạo màu đỏ và màu xanh trong canvas?

Trân trọng.

Answer 1

đây là giải pháp:

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); 

Live demo

Have fun.

Answer 2

Chức năng dưới đây khá gần. Mặc dù nếu bạn sử dụng các giá trị lớn hơn chiều rộng và chiều cao, bạn sẽ gặp sự cố.

Live Demo

function canvasRadius(x, y, w, h, tl, tr, br, bl){ 
    var r = x + w, 
     b = y + h; 

    ctx.beginPath(); 
    ctx.moveTo(x+tl, y); 
    ctx.lineTo(r-(tr), y); 
    ctx.quadraticCurveTo(r, y, r, y+tr); 
    ctx.lineTo(r, b-br); 
    ctx.quadraticCurveTo(r, b, r-br, b); 
    ctx.lineTo(x+bl, b); 
    ctx.quadraticCurveTo(x, b, x, b-bl); 
    ctx.lineTo(x, y+tl); 
    ctx.quadraticCurveTo(x, y, x+tl, y); 
    ctx.stroke(); 

} 

canvasRadius(10,10,50,50,5,5,10,15); 
ctx.strokeStyle = "red"; 
canvasRadius(80,10,50,50,47,3,0,0); 
ctx.strokeStyle = "blue"; 
canvasRadius(160,10,50,50,47,3,0,0);