我正在尝试更改由 KineticJS framework 创建的 HTML5 canvas 元素的大小——也就是说，不是 Canvas 内的对象，而是元素的大小.
由于jQuery的.animate函数不能用在这件事上(它改变了CSS，我想让它改变元素的实际属性)，我不得不开发 my own function 使用 KineticJS API 提供的内部 stage.setSize(width, height) 函数。
我完全没有编写动画函数的经验，所以我可能完全错误地处理了这种情况。
问题: 它性能依赖，因此通常不够快(感谢 setInterval)。更不用说它仅部分适用于移动设备(iPhone 4S iOS 5.0.1 测试)。任何解决方案都必须或多或少地完美运行，即使在移动设备上也是如此。
我正在寻找改进此功能的不同方法。射击。
(对于那些没有看到我的代码的链接；http://jsfiddle.net/G4nuH/ animateResize 是相关函数。)
最佳答案
在不知道最终应用程序细节的情况下，我建议尽可能避免使用 Canvas 大小的动画。您可能知道，如果更改 Canvas 元素的大小，存储在其上的所有内容都会被清除。这意味着动画尺寸需要您在每次迭代时重新绘制整个 Canvas 的同时逐步调整宽度和/或高度。对于台式机，这可能不是一个大问题。不过，移动设备会遇到困难。
相反，我建议您通过增加容器元素的大小(使用边框、背景颜色等，使动画很明显)来伪造动画。然后，当动画完成后，将您当前的 Canvas 数据保存到一个临时对象中，增加 Canvas 的大小，并将旧内容标记回其上。
如果您希望对 Canvas 尺寸进行动画处理以显示更大的理论 Canvas 上已经存在的内容(即用户有一个小窗口正在裁剪整个 Canvas )，您最好使用 CSS width 和 height 以及 overflow: hidden; 属性。使用这种方法，您将在所有绘制操作期间编辑整个 Canvas ，但动画化视口(viewport)大小将简单而流畅。
关于javascript - 动态调整由 KineticJS 框架创建的 HTML5 Canvas 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9026543/