Javascript html5中的复杂混合

我需要重新创建和动画一个复杂的插图，这已经在illustrator创建，作为一个网页。 插图由使用不同混合模式的多个形状（圆形、方形和波浪）组成。因此，一个圆可能会使用“差”，另一个圆可能会使用“乘”等

有没有可能像Illustrator/Photoshop等中那样，在同一画布元素中的不同图形上有多种不同的混合模式

---

非常感谢

是的，html5可用于绘制应用了单独混合的形状。

一个警告是，一次只能进行一个混合，因此如果一个形状需要多个混合，则必须按顺序进行每个混合

如果形状在画布上彼此重叠，则可以在第二个“暂存画布”上合成每个混合形状。暂存画布位于内存中，不可见

此外，混合在MS Edge中是新的，因此混合在MS的IE系列浏览器中不可用

下面是开始的示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var shape1=舞台造型（“乘”、“红”、“蓝”）；
var shape2=舞台造型（“差异”、“红色”、“蓝色”）；
ctx.drawImage（形状1,50,50）；
ctx.drawImage（形状2,75,30）；
函数stageShape（blendMode、color1、color2）{
var c=document.createElement（“画布”）；
var cctx=c.getContext（“2d”）；
c、 宽度=80；
c、 高度=80；
cctx.beginPath（）；
cctx.arc（30,30,30,0，数学PI*2）；
cctx.fillStyle=color1；
cctx.fill（）；
cctx.globalCompositeOperation=blendMode；
cctx.beginPath（）；
cctx.arc（50,50,30,0，数学PI*2）；
cctx.fillStyle=color2；
cctx.fill（）；
返回（c）；
}

body{背景色：白色；}
画布{边框：1px纯红；边距：0自动；}

---

如果形状相对较少，则使用SVG。如果有数百个形状，请使用画布。如果您必须支持IE，那么您必须使用SVG，因为IE的画布不支持混合。谢谢。在我的例子中，我有一个混合模式为“乘”的红色圆圈，一个混合模式为“差”的蓝色圆圈，一个混合模式为“颜色减淡”的绿色圆圈，背景色为“颜色减淡”。是否需要“暂存画布”来抽象此内容？是的，需要一个暂存画布（或两个或更多）来进行顺序混合。但好消息是混合是在GPU上完成的（如果可用），所以速度非常快。再次感谢。这给了我们希望，尽管看起来很复杂……）你有关于“舞台画布”概念的更多信息吗？现在正在尝试在其余的interwebs中查找更多示例。@zantafio staging canvas只是一个工作画布，用于在一系列混合中构建一个混合。该示例使用一个暂存画布来分隔两种混合模式。我已经编辑了我的答案，以重叠每个混合的位置，以显示在并没有第二个阶段画布的情况下不容易实现的内容。对于更复杂的混合，您甚至可能需要使用多个暂存画布。干杯！：-）谢谢！那当然有帮助