Raggio di confine CSS3 su HTML5 Canvas

Question

Ho provato a riprodurre il raggio del bordo CSS3 su tela.

È facile disegnare un rettangolo arrotondato, ma in CSS, il valore di ciascun bordo può essere elevato.

Ad esempio:
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; 
} 

Ecco un jsfiddle

Il, normale valore del raggio bordo nero, posso riprodurre quel. Il rosso, alto valore per il raggio di confine, non so come riprodurlo. E il blu, alto valore diviso per 2, stesso risultato di rosso.

La mia domanda è semplice, come riprodurre il rosso e il blu nella tela?

Cordiali saluti.

Answer 1

qui la soluzione:

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

Buon divertimento.

Answer 2

La funzione di seguito è molto simile. Anche se si utilizzano valori superiori alla larghezza e all'altezza, si avranno problemi.

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