CSS3 सीमा त्रिज्या एचटीएमएल 5 कैनवास

Question

मैं कैनवास में CSS3 सीमा त्रिज्या को पुन: पेश करने की कोशिश कर रहा हूं।

गोलाकार आयत खींचना आसान है लेकिन सीएसएस में, प्रत्येक सीमा का मूल्य उच्च हो सकता है।

उदाहरण के लिए:
एचटीएमएल

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

सीएसएस

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