HTML3キャンバスへのCSS3ボーダー半径

Question

キャンバスにCSS3ボーダー半径を再現しようとしています。

丸い四角形を描画するのは簡単ですが、CSSでは各境界の値が高くなる可能性があります。例えば

：
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; 
} 

jsfiddle

ブラック、正常境界半径の値は、私はそれを再生することができます。 赤い、ボーダー半径の高い値、私はそれをどのように再現するのか分かりません。 青で高い値を2で割った値は、赤と同じです。

私の質問は単純ですが、赤と青をキャンバスに再現する方法は？

よろしくお願いいたします。

Answer 1

ソリューション：

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

楽しんできてね。

Answer 2

以下の機能はかなり近いです。幅と高さよりも大きな値を使用する場合は、問題が発生します。ここ

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