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

您只能使用路径直接剪辑。

如果您有一张图像，您希望根据它进行剪辑，您可以可能通过在另一个 Canvas 中绘制您的内容，然后使用globalCompositeOperation<来实现这一点 与 drawImage(带掩码)结合以删除不需要的位。

然后您将再次使用 .drawImage(可能使用不同的 globalCompositeOperation)将剪切的图像与您的原始内容合并。

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