使用HTML5在Canvas中设计用户界面

时间:2012-04-06 01:12:44

标签: html5 canvas interface

我在画布上设计了一个小游戏,我想为它添加一个界面(只是一个标准的东西,有声音切换等菜单选项等)。

在Angry Birds html5(http://chrome.angrybirds.com)中,他们除了canvas之外没有任何html元素来处理他们的界面。

我只是想知道,让我的整个游戏在html5画布中设计,然后完全使用像div这样的html元素设计的用户界面,使用css样式是不好的做法?

我想替代方案是以某种方式编写某种碰撞系统来确定用户在屏幕上点击的位置。

我希望有人可以指出我在这里正确的方向,并告诉我哪种方法(纯画布,或与html元素)最适合我的画布游戏。我在这里100%关注的是性能,测试都需要几天时间,这将是一个巨大的痛苦。enter code here

1 个答案:

答案 0 :(得分:1)

确定用户在画布上点击的位置并不困难。我使用库gee,这非常容易。只需按照API中的示例创建您的gee画布,并始终访问鼠标位置(g.mouseX,g.mouseY)和鼠标操作(g.mousedrag,g.mousedown,g.mouseover,ecc ...)。当然,它还处理动画的自动刷新(g.draw)。

关于您的问题:如果要使用CSS在画布中或外部创建UI,那将取决于您。通常,您不需要关心用户界面中的性能,也没有“更好的方法”:您的性能取决于您实现代码的方式。糟糕的实施可能会导致性能滞后,无论您使用哪种技术进行连接。