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>