html5中的複雜混合

Question

我需要重新創建並在Illustrator中創建的複雜插圖的動畫製作爲網頁。 該插圖由多種使用不同混合模式的形狀（圓形，方形波）組成。所以一個圓可能會使用「差異」和另一個「乘」等等。

是否有可能在同一個canvas-element中的不同圖形上具有多個不同的混合模式，就像在Illustrator/Photoshop等中一樣？

非常感謝！

Answer 1

是的，可以使用html5繪製形狀並應用單獨的混合。

一個警告是，你一次只能做一個混合，所以如果你的一個形狀需要多個混合，那麼你必須按順序做每個混合。

如果您的形狀將在畫布上彼此重疊，則可以在第二個「舞臺佈景」上組合每個混合形狀。登臺畫面在內存中不可見。

此外，混合是MS-Edge中的新功能，因此混合在MS的IE瀏覽器系列中不可用。

這裏開始示例代碼和演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var shape1=stageShape('multiply','red','blue'); 
 
var shape2=stageShape('difference','red','blue'); 
 

 
ctx.drawImage(shape1,50,50); 
 
ctx.drawImage(shape2,75,30); 
 

 
function stageShape(blendMode,color1,color2){ 
 
    var c=document.createElement("canvas"); 
 
    var cctx=c.getContext("2d"); 
 
    c.width=80; 
 
    c.height=80; 
 
    cctx.beginPath(); 
 
    cctx.arc(30,30,30,0,Math.PI*2); 
 
    cctx.fillStyle=color1; 
 
    cctx.fill(); 
 
    cctx.globalCompositeOperation=blendMode; 
 
    cctx.beginPath(); 
 
    cctx.arc(50,50,30,0,Math.PI*2); 
 
    cctx.fillStyle=color2; 
 
    cctx.fill(); 
 
    return(c); 
 
}

body{ background-color:white; } 
 
canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>