Javascript 在p5.js中，有没有一种简单的方法可以在不绘制轮廓的情况下绘制透明形状？

我试图在p5.js中的彩色背景上绘制一个不透明的形状。所以我给了填充颜色和笔划颜色一个alpha值。问题是形状的轮廓部分地绘制在形状上。由于不透明笔划，这使它看起来像是有两个不同颜色的轮廓。以下是一个例子：

函数设置（）{
createCanvas（60,60）；
}
函数绘图（）{
背景（255）；
填充（127127）；
中风（50127）；
冲程重量（5）；
rect（10,10,40,40）；
}

我得到的是一个内部为深灰色，外部为浅灰色的边界框

有没有简单的方法来防止这种情况发生？我知道我可以“两次”画出形状（首先是填充，然后是稍微向外一点的轮廓），但是 我试图画一个相当复杂的多边形，所以我必须调整外部形状的所有顶点坐标，这将是非常烦人的工作

---

我已经尝试了不同的blendModes，但它们似乎无法解决我的问题。

发生这种情况的原因是，您的笔划权重为5，从形状的边缘向两个方向绘制。所以一些笔划在形状的内部，而一些笔划在外部

我不知道如何更改此设置。我试着玩

strokeCap

和

strokeJoin

，但没有解决问题

我想到的一个选项是绘制笔划权重为1的形状的缩小版本。看起来是这样的：

let shapeGraphics；
函数设置（）{
createCanvas（260260）；
//绘制形状的缩小版本
shapeGraphics=createGraphics（8,8）；
填充（127127）；
形状图.冲程（50127）；
形状图.矩形（0,0,8,8）；
}
函数绘图（）{
背景（255）；
noSmooth（）；
//绘制图形的放大版本
图像（形状图，10,10,40,40）；
}

---

如果这不起作用，那么我唯一能想到的另一个选择就是自己计算外边缘，然后像你提到的那样画两次形状。

发生这种情况的原因是，你有一个笔划权重5，它是从形状的边缘在两个方向上画的。所以一些笔划在形状的内部，而一些笔划在外部

我不知道如何更改此设置。我试着玩

strokeCap

和

strokeJoin

，但没有解决问题

我想到的一个选项是绘制笔划权重为1的形状的缩小版本。看起来是这样的：

let shapeGraphics；
函数设置（）{
createCanvas（260260）；
//绘制形状的缩小版本
shapeGraphics=createGraphics（8,8）；
填充（127127）；
形状图.冲程（50127）；
形状图.矩形（0,0,8,8）；
}
函数绘图（）{
背景（255）；
noSmooth（）；
//绘制图形的放大版本
图像（形状图，10,10,40,40）；
}

如果这不起作用，那么我能想到的唯一其他选择就是自己计算外边缘并绘制两次形状，如您所述。

“我试图在彩色背景上绘制不透明形状[…]”-为什么轮廓是透明的？“我试图在彩色背景上绘制不透明形状[…]”-为什么大纲是透明的？