Canvas 曲线点处椭圆形较厚边界笔划的问题

我在这里使用fabricjs，我有一个选项自定义贴花，可以在画布上绘制形状。当我在椭圆形的曲线点上笔划或增加椭圆形的边框宽度时，我对椭圆形产生了问题。它显示的边框宽度是椭圆形上下两侧的两倍

我用来画椭圆形边框的代码示例

//*****************scale oval canvas border width*******************

var ovalstrokewidth=0;
$("#ovalstrokewidth").change(function() {
var otrokew=(this.value);
$(".width_val_oval").html(otrokew);
ovalstrokewidth= parseInt(otrokew);
ovalcval=(this.value);
var w;
var h;
var ctx = canvas.getContext('2d');
canvas.clipTo = function(ctx) {
w=canvas.width / 4;
h=canvas.height / 2.4;
ctx.save();
ctx.scale(2, 1.2);
ctx.arc(w, h,ovalcrad , 0, 2 * Math.PI, true);

$("#decal_color").css('display', 'block');

//ctx.fillStyle = "#555";
ctx.fillStyle =decal_border_colour_oval;
ctx.strokeStyle = ctx.fillStyle;
//ctx.lineWidth = 1.5;
ctx.lineWidth = ovalstrokewidth;
ctx.stroke();
ctx.restore();

};
canvas.renderAll();
});

//-----------------End scale oval canvas border width------------

单击“贴花形状”

选择椭圆形选项

增加边框宽度

---

线条的变形是由ctx.scale（2,1.2）造成的，ctx.scale也会缩放线条宽度。

相反，可以使用椭圆的数学公式绘制椭圆（无需缩放）

这样你的线条就不会变形

演示：

drawerlipse（150150,2,1.2,50）；
函数抽屉直径（cx、cy、比率宽度、比率高度、半径）{
var PI2=数学PI*2；
var增量=PI2/100；
var比率=比率权重/比率宽度；
ctx.beginPath（）；
var x=cx+半径*数学cos（0）；
变量y=cy——比率*半径*数学sin（0）；
ctx.lineTo（x，y）；
对于（var弧度=增量；弧度这可能会有所帮助（但似乎也是markE答案的基础？）：我想我在2个月前也遇到过同样的问题，但我没有得到答案，因为fabricjs库文件中仍然没有方法增加与scaleX相同的椭圆形线宽和椭圆形边框的比例。因此所有答案都是错误的。他们有没有办法根据X和Y原点管理ctx.lineWidth？你的答案很好，但之后呢在画布上添加文字，你会知道为什么会发生这种情况。
drawEllipse(150,150,2,1.2,50);


function drawEllipse(cx,cy,ratioWidth,ratioHeight,radius){
    var PI2=Math.PI*2;
    var increment=PI2/100;
    var ratio=ratioHeight/ratioWidth;

    ctx.beginPath();
    var x = cx + radius * Math.cos(0);
    var y = cy - ratio * radius * Math.sin(0);
    ctx.lineTo(x,y);

    for(var radians=increment; radians<PI2; radians+=increment){ 
        var x = cx + radius * Math.cos(radians);
        var y = cy - ratio * radius * Math.sin(radians);
        ctx.lineTo(x,y);
     }

    ctx.closePath();
    ctx.stroke();
}