Javascript 按笔划/填充顺序创建混合重叠

我在画布上绘制了大量的对象

对象的中心需要与标准alpha混合

后期对象的边框（笔划）需要显示以删除任何基础边框，同时保持填充完整以进行混合

例如，一个代码片段出现了几次失败的尝试-请注意，“期望的”结果是手动生成的

解决方案也需要扩展，因为这是针对requestAnimationFrame的，并且将有数千个对象需要迭代，因此执行单个beginPath（）/stroke（）组合可能不可行

var canvas=document.getElementById（'canvas'）；
画布宽度=600；
帆布高度=600；
var ctx=canvas.getContext（'2d'）；
//设置控制对象
让对象=[{
x:20，
y:20，
w:60，
h:30，
rgba:“rgba（255,0,0,5）”
}, {
x:40，
y:30，
w:60，
h:30，
rgba:“rgba（0255,0,5）”
}]
//手动生成所需结果
ctx.beginPath（）；
for（设i=0，l=objects.length；i
您可以通过两次绘制来实现这一点：

首先，您将通过迭代方式合成笔划


使用以下命令清除填充物将落下的每个先前笔划：
画这条直线的笔划

完成此操作后，画布将只剩下最后的笔划

现在您必须绘制填充，但由于我们希望笔划位于填充之前，因此必须使用其他合成模式：
“destination over”
，并以相反顺序迭代矩形：


（异步（）=>{
var canvas=document.getElementById（'canvas'）；
画布宽度=600；
帆布高度=600；
var ctx=canvas.getContext（'2d'）；
ctx.刻度（2,2）
//设置控制对象
让对象=[{
x:20，
y:20，
w:60，
h:30，
rgba:“rgba（255,0,0,5）”
}, {
x:40，
y:30，
w:60，
h:30，
rgba:“rgba（0255,0,5）”
},
{
x:10，
y:5，
w:60，
h:30，
rgba:“rgba（0,0255，.5）”
}]
//第一步，合成笔划
for（设i=0，l=objects.length；i=0；i--）{
设myObject=objects[i]；
//落后
ctx.globalCompositeOperation=“目的地结束”；
ctx.fillStyle=myObject.rgba；
ctx.fillRect（myObject.x，myObject.y，myObject.w，myObject.h）；
}
})();
函数等待（毫秒）{
返回新承诺（res=>setTimeout（res，ms））；
}
谢谢，这里有一些有用的提示，我一定会看的！