设置宽度/高度时禁用 HTML5 Canvas 中的重置

Question

我的场景是画布宽度/高度动态更改，并且我不想重置画布。相反，我使用clearRect()，因为我知道必须清除矩形的边界。

1. 是否可以在再次设置宽度/高度时禁用画布的重置？

2. 有没有一种方法可以保存以前的状态并将其完全加载回画布而不重新绘制它？

Answer 1

1. 恐怕没有办法禁用它，它内置于画布规范中。

   第 4.8.11 节：

   <块引用>

   当创建canvas元素时，以及随后每当设置宽度和高度属性（无论是新值还是以前的值）时，位图和任何关联的上下文都必须清除回其初始状态并重新初始化新指定的坐标空间尺寸。

   恐怕

2. 是的，GetImageData/PutImageData 是一种方法，但它可能比以下方法慢得多：

   假设您的画布名为 realCanvas。制作第二个画布（我们将其称为 fakeCanvas），其大小与您想要的真实画布一样大，但仅在 javascript 代码中制作它，并且永远不会将其添加到文档中（所以不人们将永远看到它）。

   然后，在调整 realCanvas 大小之前，执行以下操作：

   fakeCanvasContext.drawImage(realCanvas, 0, 0);
   

   这会将整个画布绘制到另一个画布上，从性能角度来看，这会发生得非常快。

   完成大小调整后，您可以将 fakeCanvas 的内容绘制回 realCanvas 上。

   realCanvasContext.drawImage(fakeCanvas, 0, 0);
   

   就是这样！

   如果您想获得技术知识，您可以通过在第二次抽奖中执行此操作来加快我的速度：

   realCanvasContext.drawImage(fakeCanvas,
       0, 0, realCanvas.宽度, realCanvas.高度,
       0, 0, realCanvas.width, realCanvas.height);`
   

   这样，您只需复制适合 realCanvas 的部分。请注意，我尚未测试我编写的代码，因此可能存在一两个语法错误。