用javascript在画布上预渲染动画

Question

我有一个网络应用程序，它使用画布为绘制到屏幕上的树设置动画。它通过连续进行多次三角计算来实现。当您单击“成长”按钮时，会出现一个树木生长的动画，该动画具有用户可以更改的某些属性。您可以在此处查看应用程序http://pastehtml.com/view/c85mxfgcj.html。

问题是，如果您将“年龄”（要通过的迭代次数）设置得太高，由于计算机必须执行的计算，动画开始滞后。我想知道两件事：

1. 有没有办法在动画显示给用户之前对其进行预渲染？
2. 有没有一种方法可以做到，如果我有一棵已经渲染过的树，并且我想让它在屏幕上移动，我可以做到这一点，而不必在每一帧都重新绘制树？李>

谢谢。

Answer 1

1：您可能想查看var fragment = document.createDocumentFragment();
2：是的，通过css，速度更快！

我认为this youtube video 值得您花时间。

祝你好运

更新：2013 年 1 月 9 日 只是偶然发现了这个。
在 css3 中有一个使用步骤的动画功能。
基本上，您创建一个精灵（在画布中），然后使用 css3 使用元素上的背景属性为精灵设置动画。非常酷（并且应该使用优化的浏览器自己的代码来执行此操作，因此不会像使用 javascript/canvas 那样加载用户 cpu）。
但是它仍然没有创建动画 gif（但我认为即使使用库也应该是可能的，因为 gif 和 pnp 非常相似，然后使用 data:image/gif 协议提供该 gif），但最终结果仍然看起来在（现代）浏览器中也是如此。

HTML： <div class="hi"></div> 或 <img src="transparent.gif" class="hi">

CSS3：

.你好{ 宽度：50px； 高度：72px； 背景图片: url("http://files.simurai.com/misc/sprite.png");

-webkit-animation: play 1s steps(10) infinite;
   -moz-animation: play 1s steps(10) infinite;
    -ms-animation: play 1s steps(10) infinite;
     -o-animation: play 1s steps(10) infinite;
        animation: play 1s steps(10) infinite; }

@-webkit-keyframes 播放 { from { background-position: 0px; } 到{背景位置：-500px； } }

@-moz-keyframes 播放 { from { background-position: 0px; } 到{背景位置：-500px； } }

@-ms-keyframes 播放 { from { background-position: 0px; } 到{背景位置：-500px； } }

@-o-keyframes 播放 { from { background-position: 0px; } 到{背景位置：-500px； } }

@keyframes 播放 { from { background-position: 0px; } 到{背景位置：-500px； } }

例如jsfiddle。