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

Question

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

1. 当再次设置宽度/高度时，有没有办法禁用画布的重置？

2. 有没有办法保存以前的状态，只需将它准确地加载回画布而不重新绘制它？

Answer 1

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

   第 4.8.11 节：

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

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.width, realCanvas.height,
       0, 0, realCanvas.width, realCanvas.height);`
   

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