Javascript 画布-剪辑图像并使用复合操作“；乘；在Firefox中'；不象在铬上那样工作

我正在开发一款使用

画布的应用程序。我画了一些形状，一个接一个，可以用颜色或图像填充，并相互重叠。我使用
clip（）。我创建了一个简单的示例来说明我的问题是什么

请尝试在Google Chrome和Mozilla Firefox中打开它。而在Chrome中，图像可以被剪裁，然后设置为较低层的倍数，而在Mozilla中，应用倍数后，剪裁停止工作。有什么办法解决这个问题吗


//获取画布和绘图上下文
var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
//创建一个图像元素
var img=document.createElement（'img'）；
//加载图像后，绘制它
img.onload=函数（）{
ctx.fillStyle=“红色”
ctx.fillRect（0,0100）
//保存状态，以便我们可以撤消剪辑
ctx.save（）；
//创造一个形状，某种形式
ctx.beginPath（）；
ctx.moveTo（10,10）；
ctx.lineTo（100,30）；
ctx.lineTo（180,10）；
ctx.lineTo（200,60）；
ctx.arcTo（180,70,120,0,10）；
ctx.lineTo（200180）；
ctx.lineTo（100150）；
ctx.lineTo（70180）；
ctx.lineTo（20130）；
ctx.lineTo（50,70）；
ctx.closePath（）；
//剪辑到当前路径
ctx.clip（）；
ctx.globalCompositeOperation=“乘法”；
ctx.drawImage（img，0,0）；
//撤消剪辑
ctx.restore（）；
}
//指定要加载映像的src
img.src=”http://i.imgur.com/gwlPu.jpg";
正文{
背景：CEF；
}
这在Windows版本的FireFox上听起来…

只有FF开发人员可以提供一个真正的修复，但是由于这个bug至少在两年前被报告过，我不希望它很快被修复


现在，为了解决这个问题，您可以分两步进行绘制：


在第一个屏幕外画布上进行剪辑
然后使用现在剪裁的画布在主画布上进行混合

这可能会产生一些内存开销，但是如果您进行大量的合成/混合，那么准备第二个画布也可能很方便


//获取画布和绘图上下文
var canvas=document.getElementById（'c'）；
var ctx=canvas.getContext（'2d'）；
//创建上下文的屏幕外副本
var ctx2=canvas.cloneNode（）.getContext（'2d'）；
//创建一个图像元素
var img=document.createElement（'img'）；
//加载图像后，绘制它
img.onload=函数（）{
//在屏幕外的画布上进行剪辑
ctx2.save（）；
//创造一个形状，某种形式
ctx2.beginPath（）；
ctx2.moveTo（10,10）；
ctx2.lineTo（100,30）；
ctx2.lineTo（180,10）；
ctx2.lineTo（200,60）；
ctx2.arcTo（180,70,120,0,10）；
ctx2.lineTo（200180）；
ctx2.lineTo（100150）；
ctx2.lineTo（70180）；
ctx2.lineTo（20130）；
ctx2.lineTo（50,70）；
ctx2.closePath（）；
ctx2.clip（）；
//画图像
ctx2.drawImage（img，0,0）；
ctx2.restore（）；
//现在回到主画布上
ctx.fillStyle=“红色”；
ctx.fillRect（0,0100）；
//与我们现在剪裁的图像进行混合
ctx.globalCompositeOperation=“乘法”；
ctx.drawImage（ctx2.canvas，0,0）；
}
//指定要加载映像的src
img.src=”http://i.imgur.com/gwlPu.jpg";
正文{
背景：CEF；
}
请在问题中发布所有相关代码，而不是在外部站点的链接后面。如果可以，将问题编辑成可运行的代码段。Firefox的哪个版本？刚刚在Android上试用了61，并按其应有的方式工作。（目前无法访问桌面）。最好的方法显然是将错误报告给Mozilla的bugzilla，但现在要解决这个问题，您可以分两步进行绘制：首先在屏幕外的画布上进行剪辑，然后使用剪辑后的画布在主画布上进行合成。61.0.2个人电脑。我正在研究解决方法（有类似的想法），但我希望我能解决它。我在Windows上有问题。尚未在Android Firefox上进行测试，因此它可能在这里正常工作。我发布的代码是一个非常简单的例子。在我的应用程序中，我有一个相当复杂的情况，所以解决方法可能并不容易，这就是为什么我在寻找修复方法。我有一个图像剪辑和转换，这必须乘以其他剪辑图像，所以改变顺序不会做太多。是否可以合并两个图像数据集？我可以在第一次转换后轻松地检索ImageData，然后将其与剪裁的图像相结合，但方法putImageData（）将替换中的整个数据canvas@Luki如果你有一个更复杂的集合，那么按照我的第一个建议：使用drawImage（offscreenCanvas）将两个不同的画布合并到唯一可见的画布上。我会试着写一个片段，但在我的手机上，这并不是那么容易；-）无论如何，唯一能够提供真正修复的是FF开发人员，他们似乎并没有积极地进行修复。。。现在，2张画布的解决方案已经很好了。它将避免您保存上下文状态的痛苦，甚至比clip提供更好的反序列化。