CSS3 边框半径到 HTML5 画布答案

【问题标题】：CSS3 border radius to HTML5 CanvasCSS3 边框半径到 HTML5 画布
【发布时间】：2012-11-24 00:22:16
【问题描述】：

我试图在画布中重现 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，与红色的结果相同。

我的问题很简单，如何在画布中重现红色和蓝色？

最好的问候。

【问题讨论】：

我认为你必须使用路径方法来自己绘制曲线。 developer.mozilla.org/en-US/docs/Canvas_tutorial/Drawing_shapes 向下滚动到“moveTo”和“Bezier 和二次曲线”
只是一个问题：当border-radius: 100% 10% 0 0; 给你同样的效果时，为什么要在你的CSS 中为border-radius 使用这些巨大的值？jsfiddle.net/fAJ9t/66
嗨，谢谢你的回答，但我知道绘制圆角矩形的方法，如果用户输入高值，我希望算法/公式绘制圆角矩形。

标签： javascript css canvas

【解决方案1】：

下面的函数非常接近。虽然如果您使用大于宽度和高度的值，您将会遇到问题。

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

【讨论】：

嗨，在W3C网站上，我发现：w3.org/TR/css3-background/#corner-overlap但我不明白。

【解决方案2】：

这里是解决方案：

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

玩得开心。

【讨论】：