Javascript CSS3到HTML5画布的边界半径
我试图在画布中重现CSS3边界半径 绘制圆角矩形很容易,但在CSS中,每个边框的值可能很高 例如:Javascript CSS3到HTML5画布的边界半径,javascript,css,canvas,Javascript,Css,Canvas,我试图在画布中重现CSS3边界半径 绘制圆角矩形很容易,但在CSS中,每个边框的值可能很高 例如: HTML 这里有一个 黑色的,正常边界半径值,我可以重现。 红色,边界半径的高值,我不知道如何重现。 蓝色,高值除以2,红色的结果相同 我的问题很简单,如何在画布上重现红色和蓝色 致以最诚挚的问候。下面的功能非常接近。虽然如果使用的值大于宽度和高度,则会出现问题 function canvasRadius(x, y, w, h, tl, tr, br, bl){ var r = x + w,
HTML 这里有一个 黑色的,正常边界半径值,我可以重现。 红色,边界半径的高值,我不知道如何重现。 蓝色,高值除以2,红色的结果相同 我的问题很简单,如何在画布上重现红色和蓝色
致以最诚挚的问候。下面的功能非常接近。虽然如果使用的值大于宽度和高度,则会出现问题
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);
以下是解决方案:
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);
CanvasRenderingContext2D.prototype.roundRect=函数(x,y,宽度,高度,tl,tr,br,bl){
变量x1,x2,x3,x4,y1,y2,y3,y4,半径,比率=0,曲线Kappa=0.5522847498307934;
比率=数学最小值(数学最小值(宽度/(tl+tr)、宽度/(br+bl))、数学最小值(高度/(tl+bl)、高度/(tr+br));
如果((比率>0)和&(比率),我认为您必须使用路径方法自行绘制曲线。向下滚动到“移动到”和“贝塞尔和二次曲线”只是一个问题:当
边界半径:100%10%0;
给你同样的效果时,为什么要在CSS中使用这些巨大的边界半径值呢?嗨,谢谢你的回答,但是我知道画圆角矩形的方法,如果用户输入高值,我想要算法/公式画圆角矩形。嗨,在W3C网站上,我d:但我不明白。
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);
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);