在javascript中预渲染画布上的动画

Question

我有一个Web应用程序，它使用画布为绘制在屏幕上的树进行动画处理。它通过连续做几个trig计算来实现。当你点击“增长”按钮时，会出现一个增长树的动画，它具有用户可以更改的某些属性。你可以在这里看到这个应用程序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：

.hi { 宽度：50像素; height：72px; background-image：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关键帧播放{由{背景位置：0像素;} 到{背景位置：-500px;}}

@ -moz关键帧播放{从{背景位置：0像素;} 到{背景位置：-500px;}}

@ -MS-发挥关键帧从{{背景位置：0像素;} 到{背景位置：-500px ;}}

@ -o-keyframes play {来自{background-position：0px; } 到{background-position：-500px; }}

@keyframes play {from {background-position：0px; } 到{background-position：-500px; }}

示例jsfiddle。