Javascript 画布-填充使用多个路径创建的形状 我想做什么

我想画一个自定义形状（例如一个简单的矩形），每个边有不同的颜色。我可以用四条路来做，效果很好。但是，就这样，我似乎无法填充形状

尝试另一种方法，我可以用一条路径绘制形状并填充它，但在这种情况下，我不能对边使用不同的颜色，因为最后一个

fillStyle

将覆盖前面的颜色，即使我单独绘制子路径

---

是否可以通过分别为子路径着色或填充由多个路径组成的形状来混合这两种颜色？

在画布上使用不同的“层”，一层用于填充颜色形状，另一层用于每个颜色路径，z索引在画布上不起作用，只需确保先绘制下面的内容即可，只需将所有内容包装在一个组

标签上，以便于操作

经过一些实验，我成功地解决了我的问题。这不是一个理想的解决方案，因为它有一些开销，但它工作得很好

在绘图操作开始时，我将目标坐标存储在一个数组中，并一次又一次地绘制整个图形。每次运行都是一条新路径。使用

.globalCompositeOperation=“destination over”

我可以在现有线条下绘制线条，因此每条线条可以有不同的颜色

在绘图操作结束时，数组包含形状的所有坐标，因此

.fill（）

方法可以填充路径

我希望它能帮助其他人：

//获取画布上下文
var ctx=document.getElementById（“myCanvas”）.getContext（“2d”）；
//初始形状数组
var-shape=[]；
推({
x:0,，
y:0
}); // 或任何其他起点
//让我们试试看
抽签（20,20）；
抽签（40,40）；
抽签（60,60）；
//我们就是这样画的
函数图（x，y）{
//这很重要
//见：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
ctx.globalCompositeOperation=“目的地结束”；
//这只是为了更明显
ctx.线宽=10；
//获得随机颜色
ctx.strokeStyle=myRandomColor（）；
//保存目标坐标
推({
x:x，
y:y
});
//重置路径
ctx.beginPath（）；
//跳到起点
移动到（形状[0].x，形状[0].y）；
//把所有的东西都画出来
对于（变量i=0；i

---

我使用的是

元素，而不是SVG。不需要SVG，也可以在画布上重叠路径。我无法填充形状，因为它在笔划之前不存在。是否要多次绘制？一个用于填充，另一个用于笔划（记住为每个新路径调用beginPath），这并不是那么容易。我有一步一步的执行。你能更清楚一点吗，可能有一个示例代码？当我读到它时，你有点来做你的路径，比如说一个三角形p1，p2，p3。那你为什么不能只

fillStyle=c0；beginPath（）；移动到（p1）；lineTo（p2）；lT（p2）；lT（p3）；填充（）；fS=c1；bP（）；mT（p1）；lT（p2）；笔划（）；fS=c2；bP（）；mT（p2）；lT（p3）；笔划（）；fS=c3；bP（）；mT（p3）；lT（p1）；笔划（）？