如何通过编程在JavaScript中画一条粗线？

我试图用一条用户可以在画布元素上绘制的动态线来定义

赛马场。因此，当绘制线时，程序应为其添加边线，如下图所示：


我已经设法通过使用线法线来模仿这个想法，但无法正确完成。此时，我将点放在直线法线方向的直线中间，并使用这些点绘制轮廓。虽然在大转弯的情况下生成的线相对平滑，但急转弯往往会生成环路

如下图所示：


下面是为上面的边线生成点的当前代码（我使用的是p5.js JavaScript库）：


var sketch=函数（p）{
与（p）{
让我们的手点；
让我们来讨论这些问题；
让我们收集；
让我们来分析路径；
让沙普斯；
让我们迈步；
让tmp；
让多伦德；
让线偏移；
p、 设置=函数（）{
createCanvas（600600）；
手点=[]；
步行点=10；
收集=真；
parsepath=false；
形状=[]；
步骤=2；
tmp=[]；
多伦德=真；
lineoffset=15；
};
p、 draw=函数（）{
如果（多伦德）{
背景（220）；
更新（）；
对于（让形状的形状）{
shape.show（）；
}
}
};
函数更新（）{
如果（按下鼠标）{
如果（收取）{
让鼠标=createVector（mouseX，mouseY）；
按（鼠标）；
形状。绘图路径（手点）；
parsepath=true；
}
}else if（解析路径）{
设tmp1=Shape.cleanPath（手点，步长）；
设s1=新形状（tmp1，1，'线'，颜色（175））；
形状。推动（s1）；
设tmp2=线边点（tmp1，线偏移）；
设s2=新形状（tmp2.sideA，1，'线'，颜色（175120,0））；
设s3=新形状（tmp2.sideB，1，'线'，颜色（175,0,120））；
形状。推动（s2）；
形状。推（s3）；
手点=[]；
parsepath=false；
//多伦德=假；
}
}
阶级形态{
构造器（点、磁、类型=‘线’，着色器=颜色（200、0、100））{
this.points=points.slice（）.map（item=>item.copy（））；
this.type=type；
this.mag=mag；
this.shader=着色器；
}
静态清洁路径（点、步）{
设tmp=[]；
让输出=[]；
for（设i=1；i0）{
设prev=this.points[i-1]；
设curr=this.points[i]；
冲程重量（this.mag）；
笔划（this.shader）；
行（前x行、前y行、当前x行、当前y行）；
}else if（this.type=='point'）{
仰泳（）；
填充（this.shader）；
椭圆（this.points[i].x，this.points[i].y，this.mag*2，this.mag*2）；
}
}
}
}
班级线{
静态边点（点、线偏移）{
设sideA=[]；
设sideB=[]；
for（设i=1；i
正文{
背景色：#ffffff；
}
以后，请尝试发布一篇文章。我无法运行您发布的代码

所说的，你可以考虑的一个选项是使用<代码> StutkWeyLead（）/<代码>函数来绘制不同宽度的路径。下面是一个例子：
constpath=[]；
函数设置（）{
createCanvas（400400）；
//向路径添加一些默认点。
push（createVector（0,0））；
push（createVector（宽度/4，高度/4））；
}
函数绘图（）{
背景（220）；
//用粗灰线绘制路径。
冲程重量（50）；
中风（200）；
for（设i=1；i