BAE支持HTML5 Canvas

 

BAE支持HTML5 Canvas

标签： 移动 Widget BAE JIL

2010-12-02 16:37

         BAE（Browser based Application Engine，基于浏览器技术的应用引擎）是终端应用的基础平台，是支持WAC(JIL) Widget的跨平台应用解决方案。

         WAC(JIL) Widget是基于Web技术的终端应用，具有开发简单、功能强大、跨平台等优点。通过调用Widget API，WAC(JIL) Widget还能使用终端能力及网络能力，例如多媒体播放功能、位置信息访问等。

         中国移动BAE\WAC(JIL) Widget支持W3C标准，并且能够支持HTML5的一些功能，例如Canvas。开发者可以使用Canvas元素快速开发具有画布功能的Widget。

         HTML 5引进了很多新特性，其中最令人期待的新特性之一就是Canvas元素。HTML 5 Canvas提供了通过JavaScript绘制图形的方法，此方法使用简单且功能强大。每一个Canvas 元素都有一个“上下文( context )”，在其中可以绘制任意图形。

         下面我们介绍使用Canvas元素的两个WAC(JIL) Widget实例。

         首先介绍三维俄罗斯方块Widget：

                   

         我们知道，HTML5 的 Canvas 元素本身是没有绘图能力的，所有的绘制工作必须通过JavaScript完成，即使用JavaScript 在网页上绘制图像。所以，我们需要在.html文件中添加Canvas标签：

    <CANVASid="Canvas" width="200" height="400">

    <CANVASid="sprite" width="200" height="400">

         然后再在.js文件中绘制图形。这里就不赘述了。

         运行Widget，进入菜单主界面。在菜单主界面有帮助按钮，点击进入帮助信息界面；要开始游戏点击“play”按钮；设置游戏则点击“setting”按钮进入设置界面；该Widget还有提供排行榜的功能，点击“High scores”按钮就可以进入排行榜页面。

         点击“play”按钮进入游戏选择界面,由于Widget使用的是无键盘触摸屏手机，我们设置四个按钮图片来代替控制。

         Canvas能给我们带来更好的用户体验，同时，它和手机其他功能的结合也给Widget带来了更加丰富的体验。

         下面，我们介绍另一个使用Canvas标签的WAC(JIL) Widget：采蘑菇的小姑娘。

                    

         这款游戏利用了Canvas标签和手机的加速度传感器功能，根据用户移动手机控制小姑娘的运动。它包含了排行功能、帮助功能和游戏功能。

         用户进入游戏后，Widget会不断从加速度传感器获取数据，并进行数学分析从而判断用户的行为。这种方式可以使用户通过倾斜手机控制“小姑娘”从8个角度进行移动，从而采到“蘑菇”，极大地增强了用户体验。

 

         上面的两个Widget实例，让我们了解了中国移动BAE\WAC(JIL) Widget对HTML5 Canvas标签的支持。随着HTML5技术越来越受到开发者的重视，相信会有越来越多使用Canvas标签的精彩Widget产品出现。

         （中国移动研究院 BAE团队    BAE123@139.COM）
 

权限： 公开   来自：labs