帆布动画帧渲染：无限循环与触发mousemover（） [英] Canvas animation frame rendering: Infinite Loop vs. triggering on mousemover()

问题描述

好吧，这是非常理论化的问题：
我编码与HTML5 canvas元素的动画。动画是依赖于移动鼠标（鼠标时休息=没有动画）。对于渲染，我看到下列选项：

Ok, this is very theoretical question: I am coding an animation with the HTML5 canvas element. The animation is dependent on the mouse moving (when mouse rests = no animation). For the rendering, I see the following options:

• 选项1：一个循环，不断不断重绘帆布（阉鼠标移动或不）


• 选项2：通过鼠标移动（）事件触发绘制函数（使用jQuery）

我倾向于赞成选项2，因为在需要时呈现只proccessed。但我担心一件事：如果鼠标移动太快（特别是在较慢的机器），迭代可能会重叠扰乱了画布（见下面的我图）

I tend to favor option 2, because the rendering is only proccessed when needed. But I am worried about about one thing: If the mouse moves too fast (and especially on slower machines), the iterations might overlap and mess up the canvas (see my illustration below).

于是，我想到了一个解决方法：

So I thought about a workaround:

• 选项3：使用选项2，但每次触发检查，如果已经有迭代当前执行平局。如果是的话，触发被忽略。

不过，我也可以在这里看到了一些问题：如我在图中，一个鼠标移动的最后一帧可能被排除在外（因为它重叠previous调用）。此外，中恒检查可能dicrease性能（这是不是在选项1需要）。

But I can see a few problems here too: As in my illustration, the last frame of a mouse move might be left out (because it overlaps a previous call). Plus, the constant checking might dicrease performance (which is not needed in option 1).

所以选项哪一个是最好的？没有任何人有这方面的一些经验吗？

So which one of the options is the best? Does anybody have some experience on this?

链接到插图（不能张贴图片还）： HTTP：//i.stack .imgur.com / WHLDQ.png

Link to the illustration (can't post images yet): http://i.stack.imgur.com/WHLDQ.png

推荐答案

我用两者的结合。

我有2个全局变量（mousex，像老鼠）
我更新这些对鼠标移动

I have 2 global variables (mousex,mousey) I update these on mousemove

和我有一个平局循环负载和repeast每次启动，正秒

And i have a draw loop that start on load and repeast every ,n-seconds

编辑：这个想法是分裂的视觉和工作code（碰撞，得分，...）

the idea is to split the visual and the working code (collision,score,...)

绘图循环火灾每2秒，而鼠标移动时更新everymove

The drawing loop fires every 2 sec while the mousemove is updated on everymove

-the循环是设置这么慢是因为...显示探源
例如：
    jsfiddle.net / 9jW3d /显示/``

-the loop is that set so slow becaus it show the diffrence example : jsfiddle.net/9jW3d/show/``

这篇关于帆布动画帧渲染：无限循环与触发mousemover（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！