2

通常要使用 Canvas 从另一个形状中切割出一个形状，我使用了 globalCompositeOperation 选项“xor”：

var c2 = document.getElementById('canvas').getContext('2d');
c2.globalCompositeOperation = "xor";
c2.fillRect(0, 0, 200, 200);
c2.fillRect(170, 0, 30, 30); // shape 2 is cut out from shape 1

但是，当 fillStyle 的 alpha 值 < 1 或上下文的 globalAlpha < 1 时，“剪切”形状不再完全不可见。

具体来说，如果 alpha >0.5 且 <1，您会看到较轻的形状版本。如果 alpha 为 0.5，则根本看不到切口。如果 alpha <0.5，我们会得到相反的结果：应该被剪掉的形状实际上比第一个形状更暗。

这可以在http://jsfiddle.net/N7aXY/2/看到。

您可以尝试更改 alpha 值以查看不同的效果。

当背景形状的 alpha < 1 时，有什么方法可以完全切掉一个形状？

4

1 回答 1

1

好的，这有点“骇人听闻”，但无论如何我们都走了：

  1. 将合成设置为 XOR。
  2. 通常从 shape1 绘制到“剪切”shape2。
  3. 保存画布。
  4. 将合成设置为正常（source-over）。
  5. 将 globalAlpha 设置为您想要的级别。
  6. 清除画布并重新绘制保存的图像。
  7. 结果：globalAlpha 和 globalCompositing 和谐地工作！

这是代码和小提琴：http: //jsfiddle.net/utttk/1/

ctx.fillStyle="red";
ctx.globalCompositeOperation="xor";
ctx.fillRect(0,0,200,200);
ctx.fillRect(170,0,30,30);
var png=canvas.toDataURL();
ctx.globalCompositeOperation="source-over"; // "normal" compositing
ctx.globalAlpha=.2;
var image=new Image();
image.onload=function(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
   ctx.drawImage(image,0,0);
}
image.src=png;
于 2013-03-22T21:05:36.897 回答