Javascript-画布CSS边框半径模拟

我试图在画布上模拟CSS边界半径属性的行为。我已经做了一些工作，但是浏览器正在处理一些缺少的修改，我无法在画布上重现（请参见下面的图片链接作为示例）

然而，当他们离开时，我正在努力适应边界 形状

下面是一个示例，让我们采用一个100px（宽度）x100px（高度）的HTML形状，然后应用以下半径：

边界半径：100px 52px 1px 1px

然后使用相同的参数在画布中绘制此形状

然后我得到这个（红色形状=画布形状，绿色形状=HTML形状）

（很抱歉，由于我的声誉，我无法上传图像）

我用这个函数来画形状

以下是参数的说明

xx:X轴位置
yy:Y轴位置
ww：宽度
hh：高度
rad:{tl:0，tr:0，br:0，bl:0}（用于左上、右上、右下、左下半径）

我没有得到我能做的，以使它工作，有人可以帮助我或给我一个小费，以便做到这一点？谢谢

PS：对不起，我的英语不好

（见下面的片段）


//Ctx
var ctx=document.getElementById（“圆角矩形”）.getContext（“2d”）；
//圆矩形函数
ctx.constructor.prototype.fillRoundedRect=
功能（xx，yy，ww，hh，rad，fill，stroke）{
如果（类型（rad）=“未定义”），rad=5；
this.beginPath（）；
此。移动到（xx，yy）；
这个.arcTo（xx+ww，yy，xx+ww，yy+hh，rad.tr）；
这个.arcTo（xx+ww，yy+hh，xx，yy+hh，rad.br）；
这个.arcTo（xx，yy+hh，xx，yy，rad.bl）；
这个.arcTo（xx，yy，xx+ww，yy，rad.tl）；
if（stroke）this.stroke（）；//默认为无笔划
if（fill | | typeof（fill）==“undefined”）this.fill（）；//默认为fill
};
ctx.fillStyle=“红色”；
ctx.strokeStyle=“#ddf”；
var copy=document.getElementById（'copy'）；
var tl=document.getElementById（'tl'）；
var tr=document.getElementById（'tr'）；
var bl=document.getElementById（'bl'）；
var br=document.getElementById（'br'）；
var off=document.getElementById（'off'）；
功能测试（）{
ctx.clearRect（0,060500）；
/*1.左上角*/
/*2.右上角*/
/*3.右下角*/
/*4.左下角*/
var borders=[tl.value，tr.value，br.value，bl.value]。连接（'px'）+'px'；
copy.style.borderRadius=边框；
var copyRad=borders.replace（/px/g''）.split（''）.map（函数（a）{
返回parseInt（a）
});
var rad={
tl:copyRad[0]，
tr:copyRad[1]，
br:copyRad[2]，
bl:copyRad[3]
};
var o=+off.value；
ctx.fillRoundedRect（15+o，15+o，100100，rad）；
}
tl.oninput=测试；
tr.oninput=测试；
bl.oninput=试验；
br.oninput=测试；
off.oninput=测试；
test（）

标题
html，正文{
保证金：0；
填充：0；
}
左上角


右上角


左下角


右下角


抵消


似乎浏览器会在其变形时以某种方式修正半径。我创建了
correctRadius
函数，它可以执行类似的操作。当然，结果并不完全相同，但至少形状没有任何间隙


//Ctx
var ctx=document.getElementById（“圆角矩形”）.getContext（“2d”）；
功能校正半径（r、w、h）{
如果（r.tl+r.tr>w）{
r、 tl-=（r.tl+r.tr-w）/2；
r、 tr=w-r.tl；
}
如果（r.bl+r.br>w）{
r、 br-=（r.br+r.bl-w）/2；
r、 bl=w-r.br；
}
如果（r.tl+r.bl>h）{
r、 tl-=（r.tl+r.bl-h）/2；
r、 bl=h-r.tl；
}
如果（r.tr+r.br>h）{
r、 tr-=（r.tr+r.br-h）/2；
r、 br=h-r.tr；
}
}
//圆矩形函数
ctx.constructor.prototype.fillRoundedRect=
功能（xx，yy，ww，hh，rad，fill，stroke）{
校正半径（rad、ww、hh）；
如果（类型（rad）=“未定义”），rad=5；
this.beginPath（）；
此。移动到（xx，yy）；
这个.arcTo（xx+ww，yy，xx+ww，yy+hh，rad.tr）；
这个.arcTo（xx+ww，yy+hh，xx，yy+hh，rad.br）；
这个.arcTo（xx，yy+hh，xx，yy，rad.bl）；
这个.arcTo（xx，yy，xx+ww，yy，rad.tl）；
if（stroke）this.stroke（）；//默认为无笔划
if（fill | | typeof（fill）==“undefined”）this.fill（）；//默认为fill
};
ctx.fillStyle=“红色”；
ctx.strokeStyle=“#ddf”；
var copy=document.getElementById（'copy'）；
var tl=document.getElementById（'tl'）；
var tr=document.getElementById（'tr'）；
var bl=document.getElementById（'bl'）；
var br=document.getElementById（'br'）；
var off=document.getElementById（'off'）；
功能测试（）{
ctx.clearRect（0,060500）；
/*1.左上角*/
/*2.右上角*/
/*3.右下角*/
/*4.左下角*/
var borders=[tl.value，tr.value，br.value，bl.value]。连接（'px'）+'px'；
copy.style.borderRadius=边框；
var copyRad=borders.replace（/px/g''）.split（''）.map（函数（a）{
返回parseInt（a）
});
var rad={
tl:copyRad[0]，
tr:copyRad[1]，
br:copyRad[2]，
bl:copyRad[3]
};
var o=+off.value；
ctx.fillRoundedRect（15+o，15+o，100100，rad）；
}
tl.oninput=测试；
tr.oninput=测试；
bl.oninput=试验；
br.oninput=测试；
off.oninput=测试；
test（）

标题
html，正文{
保证金：0；
填充：0；
}
左上角


右上角


左下角


右下角


抵消



function (xx, yy, ww, hh, rad, fill, stroke) {
    if (typeof(rad) === "undefined") rad = 5;
    this.beginPath();
    this.moveTo(xx, yy);
    this.arcTo(xx + ww, yy, xx + ww, yy + hh, rad.tr);
    this.arcTo(xx + ww, yy + hh, xx, yy + hh, rad.br);
    this.arcTo(xx, yy + hh, xx, yy, rad.bl);
    this.arcTo(xx, yy, xx + ww, yy, rad.tl);
    if (stroke) this.stroke();  // Default to no stroke
    if (fill || typeof(fill) === "undefined") this.fill();  // Default to fill
};