简体繁体 English

在HTML5 Canvas中绘制对象的有效方法

[英]Efficient way of drawing objects in HTML5 Canvas

原文 2011-11-28 14:22:33 4 1 javascript/ html5-canvas

I'm completely new to HTML 5 Canvas, so I apologize in advance if I'm asking stupid question... 我是HTML 5 Canvas的新手，所以如果我问一个愚蠢的问题，我要提前道歉...

I've studied some basic example for implementing animations. 我研究了一些实现动画的基本示例。 All of those are not "object oriented" examples, meaning that there is a central draw() method which is called at regulr interval and clears & redraws everything each time. 所有这些都不是“面向对象的”示例，这意味着有一个集中的draw（）方法，该方法在调节间隔时调用，每次都清除并重画所有内容 。 From the knowledge I have in graphic programming with other languages / toolkits, a more efficient way should be using an "object oriented" approach where every "object" on the stage has its own draw method which checks if the object actually need to be redrawn against an invalidated clipping region. 根据我在使用其他语言/工具包进行图形编程方面的知识，更有效的方法应该是使用“面向对象”的方法，其中舞台上的每个“对象”都有自己的绘制方法，该方法可以检查是否确实需要重绘对象针对无效的裁剪区域。

Does it make sense with canvas too in terms of performance and CPU load? 在性能和CPU负载方面，canvas也有意义吗？ Is there another more efficient approach (examples)? 还有另一种更有效的方法（示例）吗？

1 个解决方案

Not sure if it is efficient performance wise, but Dojo GFX is very efficient development wise. 不知道这是否是有效的性能明智的选择，但是Dojo GFX是非常有效的开发明智的选择。 It is a proxy between your shape objects and their visual representation using different rendering facilities including HTML5 Canvas. 它使用不同的渲染工具（包括HTML5 Canvas）在形状对象及其视觉表示之间进行代理。

With GFX you will surely not require a central draw method clearing and redrawing everything each time you need to make a transformation to some of the shapes. 使用GFX，您每次都需要对某些形状进行转换时，肯定不需要使用中央绘制方法来清除并重新绘制所有内容。