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

Question

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

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

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

Answer 1

1. 我担心没有办法禁用它，它内置于画布规范中。

   第4.8.11节：

     

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

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的部分。请注意，我没有测试我编写的代码，因此可能存在语法错误或两个。