设置宽度/高度时，在HTML5画布中禁用重置

我的场景是动态更改了画布宽度/高度，而我不想重置画布。相反，我使用clearRect（），因为我知道矩形必须被清除的边界。设置宽度/高度时，在HTML5画布中禁用重置

当宽度/高度再次设置时，有没有办法可以禁用画布的重置？
有没有办法保存以前的状态，只是将其加载回画布而不重新绘制它？

2011-03-24 Fahad

当您调整大小时，无法防止画布重置。你将不得不保存它，调整它的大小，然后恢复你保存的内容。 – Gabe 2011-03-24 04:19:34

我认为这有点奇怪，无论如何，我发现使用GetImageData/PutImageData保存/恢复的方法，这有助于现在。我一直在寻找的是画布不重绘，除非用户指定它，这将更多地控制画布对用户更改作出反应的方式。 – Fahad 2011-03-24 05:16:52

恐怕没有办法来禁用此功能，它内置于画布规范。

第4.8.11：

当画布元件被创建，并随后每当宽度和高度属性设置（是否为一个新值，或先前的值）时，位图和任何相关联的上下文必须清除回初始状态，并用新指定的坐标空间维度重新初始化。
是，和GetImageData/PutImageData是一种方式，但它可能比通过以下方式要慢得多：

比方说，你的画布被称为realCanvas。制作第二个画布（我们将其称为fakeCanvas），它与您想要的真实画布一样大，但只能在JavaScript代码中制作，并且绝不会将其添加到文档中（因此没有人会看到它）。

然后，你调整realCanvas权利之前，无法进行此操作：
```
fakeCanvasContext.drawImage(realCanvas, 0, 0); 
```
这将引起一个整个画布到另一个，它会从性能的角度发生得很快。

一旦完成调整大小，您可以将fakeCanvas的内容拖回到realCanvas中。
```
realCanvasContext.drawImage(fakeCanvas, 0, 0); 
```
就是这样！

如果你想获得的技术，你甚至可以通过更多这样的第二轮抽签加快我的方式：
```
realCanvasContext.drawImage(fakeCanvas, 
    0, 0, realCanvas.width, realCanvas.height, 
    0, 0, realCanvas.width, realCanvas.height);` 
```
这样，你只复制可以容纳到realCanvas的部分。请注意，我没有测试过我写的代码，所以可能会有一两个语法错误。

来源

2011-03-24 13:42:58

我尝试了你的建议，我的场景很不一样，它不是调整画布大小。这是一种交易者网格场景，画布中的更新每250毫秒就有一次，我的确可以获得大约8-20％CPU使用率的良好性能，与Get/Put镜像数据几乎相同。但无论如何，drawImage方法应该可以帮助我在其他情况下。该规范很奇怪，应该有一个应该重置画布的reset（）方法，通过改变画布的宽度/高度来增加/减少像素而不是重新初始化它自己。 – Fahad 2011-03-26 07:12:05

设置宽度/高度时，在HTML5画布中禁用重置

回答

相关问题