javascript - HTML5 context.clip() 使用图像

Question

有没有办法使用图像作为剪贴蒙版而不是创建这样的形状：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();

我试图context.drawImage('myimg.png')在上下文和剪辑之上，但没有奏效。

Answer 1

您只能直接clip使用路径。

如果您有一个想要剪辑的图像，您可以通过在另一个画布中绘制您的内容来实现这一点，然后使用globalCompositeOperation结合drawImage（与蒙版）来删除您不想要的位。

然后，您将.drawImage再次使用（可能使用不同的globalCompositeOperation）将该剪辑的图像与您的原始内容合并。

参见例如http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/