Javascript 在HTML5画布中剪切多个图像

我正在使用HTML5画布进行图像处理。在我的画布上，我有许多图像。当我想单独剪辑图像时。但是，当我通过创建形状剪裁一幅图像并使用

clip（）

函数时，效果很好。但是，当我尝试使用相同的方法剪辑另一幅图像时，问题就出现了。当画布存储前一个形状时，它将与新形状连接，并相应地剪辑第二个图像。我想破坏之前的形状。请注意，我不能使用

clearRect（）

清除画布，因为我的上一张剪辑图像就在那里

请参考以下链接：

在链接中，将图像拖动到画布预定义层中，然后四处拖动图像。如果图像试图超出边界，则可以清楚地看到图像被正确剪裁

现在将另一个图像拖动到另一个框中的画布中。现在您可以看到剪辑功能不正常

下面是我在脚本中所做的：

这里是JSFiddle链接

你能帮我解决这个问题吗？ 如果您找到另一种方法来清除以前的形状，这将非常有用

---

提前谢谢。

我已经自己解决了这个问题。画布不提供多图像剪辑选项。所以，如果你想在画布上剪辑多幅图像，你必须使用你自己的剪辑功能。只需通过所选区域外画布的

clearRect（）

清除该区域。对每个图像重复这个过程，您就完成了

解决方案链接：

JS脚本链接：

---

谢谢。

我能找到的最佳解决方案是使用隐藏画布，并绘制到该画布上，然后在主画布上使用putImageData方法

var c=document.getElementById（“myCanvas”）；
var ctemp=document.getElementById（“myCanvasTemp”）；
var ctx=c.getContext（“2d”）；
var ctxTemp=ctemp.getContext（“2d”）；
ctxTemp.fillStyle=“红色”；
ctxTemp.fillRect（10,10,50,50）；
ctxTemp.fillStyle=“蓝色”；
ctxTemp.fillRect（20,20,50,50）；
函数副本（）{
var imgData=ctxTemp.getImageData（10,20,50,10）；
ctx.putImageData（imgData，10,10）；
}

您的浏览器不支持HTML5画布标记。
您的浏览器不支持HTML5画布标记。





复制

我很想提供帮助，但我的AV是说不要去你的链接，因为它们以包含病毒而闻名，在JSFIDDLE上发布你的示例你是否错过了在剪辑之前/之后必须使用保存/还原？也许你只是不明白画布是一个状态机==你必须自己观察画布的状态。@gamealchest+1我怀疑您认为塔塔需要保存/恢复是正确的。澄清您的观点：所有新图形都将保留以前的剪裁区域。要避免这种持久性，请在剪切之前执行

context.save（）

，然后在完成剪切和绘制后执行

context.restore（）

。这样您就可以为新的图纸应用新的剪辑。谢谢您的回复。但是我以前在这段代码中使用过save/restore，但后来我删除了save/restore，因为它只保存/恢复画布上下文的属性，而不是形状或剪裁区域。我想撤消剪切区域的形状并创建一个新的。你能帮助我吗？