Javascript 动画调整KineticJS框架创建的HTML5画布的大小

我试图更改HTML5画布的大小，该元素由创建，也就是说，不是画布中的对象，而是元素的大小

由于jQuery

.animate

函数不能用于此问题（它更改CSS，我希望它更改元素的实际属性），因此我必须开发使用KineticJS API提供的内部函数的。 我根本没有编写动画函数的经验，所以我可能完全错了

问题是： 它取决于性能，因此通常速度不够快（由于setInterval）。更不用说它只在移动设备上部分工作（iPhone4SiOS5.0.1测试）。任何解决方案都必须或多或少完美地工作，即使是在移动设备上

我正在寻找不同的方法来改进这个功能。开枪

---

（对于那些没有看到我的代码链接的人；

animateResize

是相关函数。）

在不知道最终应用程序的细节的情况下，我建议尽量避免画布大小的动画。您可能知道，如果更改canvas元素的大小，则存储在该元素上的所有内容都会被清除。这意味着为尺寸设置动画需要您在每次迭代重新绘制整个画布时以增量方式调整宽度和/或高度。对于台式机来说，这可能不是什么大问题。不过，移动设备将面临困境

相反，我建议您通过增加容器元素的大小（使用边框、背景色等，使动画清晰可见）来伪造动画。然后，当动画完成时，将当前画布数据保存到临时对象，增加画布的大小，并将旧内容戳回画布

---

如果您希望对画布尺寸设置动画，以显示在更大的理论画布上已经存在的内容（即，用户有一个小窗口正在裁剪整个画布），您最好使用CSS

width

和

height

以及

overflow:hidden属性。使用这种方法，您可以在所有绘制操作期间编辑完整的画布，但视口大小的动画设置将简单而平滑。
画布是图形的视口，可以是文档的整个大小。您可以使用
context.clip（）
函数定义要显示的区域，而不是调整画布的大小，这需要更新html框模型。（您的性能问题！）

经过一些研究，我找到了自己的破解方法。使用
jQuery.animate
的示例。因为KineticJS有多个背景层，所以必须对它们进行动画处理

    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }

我同意在每个帧上重画需要高性能，这正是内部函数所做的。是否有任何方法可以手动执行此操作，而无需重新绘制，例如拉伸（类似CSS），然后在动画完成后重新绘制？一个CSS解决方案，也许？@Zar你当然可以这样做，但是如果你放大画布，你的画布在动画中会看起来扭曲（模糊）。您可以编辑canvas元素的CSS
width
和
height
属性，而无需擦除数据——这只会拉伸内容。动画完成后，只需在内存中创建一个带有新维度的临时画布，然后在其上重新绘制内容。然后把旧的拉伸的换成新的。这正是我想要的，但是用KineticJS不行。奇怪的是，更改CSS根本不会改变画布。我很快就会发布一个提琴。@Zar我以前从未与KineticJS合作过。您可以访问框架正在操作的实际画布对象吗？如果是这样，你可以直接修改CSS
宽度
和
高度
。我奖励了你的文章，因为这是我认为最好的一篇。谢谢你的努力，我会继续寻找一个直接的解决方案！那么，从我对
clip
函数的理解来看，这难道不意味着画布从一开始就必须是所需的大小吗？因为它不会改变画布的实际大小——这正是我想要的。如果我错了，请纠正我。我确实找到了一个解决方案，但是，它没有列在答案的顶部，请向下滚动一点。
    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }