BAE支持HTML5 Canvas
2011-08-22 14:42
309 查看
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
相关文章推荐
- 支持移动端的HTML5 Canvas逼真黑板特效
- HTML5 中canvas支持触摸屏的签名面板
- html5中canvas学习笔记2-判断浏览器是否支持canvas
- 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案
- HTML5 Canvas 判断浏览器是否支持Canvas绘图
- 让IE8支持HTML5及canvas功能!
- HTML5 Canvas: 测试浏览器是否支持Canvas
- 基于HTML5 Canvas绘制的支持手势缩放的室内地图
- HTML5 Canvas之测试浏览器是否支持Canvas的方法
- html5 FileReader+Canvas 前端压缩图片(IE9及以下浏览器不支持)
- js判读浏览器是否支持html5的canvas的代码
- 让IE8支持HTML5及canvas功能!
- js判读浏览器是否支持html5的canvas的代码
- 让IE支持HTML5的Canvas
- 让IE8支持HTML5及canvas功能!
- HTML5 中canvas支持触摸屏的签名面板
- 让IE8支持HTML5及canvas功能!
- 使ie9以下版本支持canvas,css3等主流html5技术的方法
- js判读浏览器是否支持html5的canvas的代码
- js判读浏览器是否支持html5的canvas