將CSS3邊框半徑設置爲HTML5 Canvas

我試圖在畫布中重現CSS3邊框半徑。將CSS3邊框半徑設置爲HTML5 Canvas

繪製圓角矩形很容易，但在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，紅色的結果相同。

我的問題很簡單，如何在畫布中重現紅色和藍色？

此致敬禮。

來源

2012-11-20 kran

我認爲你必須使用路徑方法來繪製你自己的曲線。 https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Drawing_shapes向下滾動到「moveTo」和「Bezier和二次曲線」 – Mic

只是一個問題：爲什麼在你的border-radius中使用這些巨大的值CSS當'border-radius：100％10％0 0;'給你同樣的效果嗎？http：//jsfiddle.net/fAJ9t/66/ – Ana

嗨，謝謝你的回答，但我知道繪製圓角矩形的方法，如果用戶輸入高值，我希望算法/表單可以繪製圓角矩形。 – kran

這裏的解決方案：

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

玩得開心。

來源

2012-11-21 13:37:44 kran

下面的函數非常接近。雖然如果你使用大於寬度和高度的值，你會遇到問題。

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

來源

2012-11-21 02:55:45 Loktar

嗨，在W3C網站，我發現： http://www.w3.org/TR/css3-background/#corner-overlap 但我不明白。 – kran

將CSS3邊框半徑設置爲HTML5 Canvas

回答

相關問題