HTML5 Canvas 撤消在 IE 或 Firefox 中无法正常工作答案

【问题标题】：HTML5 Canvas undo isn't working properly in IE or FirefoxHTML5 Canvas 撤消在 IE 或 Firefox 中无法正常工作
【发布时间】：2012-08-21 16:54:39
【问题描述】：

我已经开始为画布元素创建撤消脚本。它远未完成，但基础已经到位。该代码在 Chrome、Safari 和 Opera 中运行良好，但在 IE 和 Firefox 中抛出错误。 Firefox 的错误是NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object，IE 的错误是Invalid calling object。

两个错误都与var original = context[p]; 函数中的var original = context[p]; 行有关。

这是我的代码：http://jsfiddle.net/evankennedy/cDdJd/

【问题讨论】：

标签： javascript canvas html5-canvas

【解决方案1】：

当您尝试在自己的代码中包装本机对象的方法时，某些浏览器不喜欢它。这是一个安全“功能”。

你最好创建一个全新的对象类来包装上下文，然后代理它的方法（和属性）。

这也将避免需要您的history.write 状态，因为undo 和redo 方法仍然可以访问原始方法。

【讨论】：

【解决方案2】：

因为您的脚本缺少 cmets，而且问题没有详细解释，所以很难弄清楚您在做什么。

但是，如果您需要存储<canvas> 的状态，您需要将其所有像素复制到内存缓冲区。无法克隆画布或上下文对象，因为它们绑定到当前 UI 状态。

要访问画布数据，请使用 getImageData()

*https://developer.mozilla.org/en-US/docs/DOM/CanvasRenderingContext2D#getImageData%28%29

并通过相应的 put 像素调用来恢复它。

【讨论】：

他正在存储画布上调用的所有方法的堆栈，而不是其像素状态。 “撤消”擦除画布并重新绘制直到最后一次操作的所有内容。