HTML5 Canvas 绘图实例教程(4)_H5之家 - 中国HTML5教程资源分享第一站

3.3、现场光线较暗，其它玩家干扰，在追踪玩家运动轨迹的过程中，可能会出现抖动的情况，我们需要去除干扰数据。（当突然出现很大位移时，需要将数据移除）

var tracks = this.tracks; var len = tracks.length; // 数据过滤 if(tracks[len-1] !== window.undefined) { if(Math.abs(n - tracks[len-1]) > 0.2) { return; } } this.tracks.push(n);

3.4、当玩家站立，只是左右少量晃动时，我们认为玩家是站立状态。

// 保留5个数据 if(this.tracks.length > 5) { this.tracks.shift(); } else { return; } // 位移总量 var dis = 0; for(var i = 1; i < this.tracks.length; i++) { dis += this.tracks[i] - this.tracks[i-1]; } if(Math.abs(dis) < 0.01) { this.stand(); } else { if(this.tracks[4] > this.tracks[3]) { this.turnRight(); } else { this.turnLeft(); } this.run(); }七、展望

1、使用HTML5开发Kinect体感游戏，降低了技术门槛，前端工程师可以轻松的开发体感游戏；

2、大量的框架可以应用，比如用

响应式媒体查询是将bootstrap作为单独的文件，你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖，你需要做的只是通过一些AngularJS指令创建友好的用户体验。

详细了解可以看一看 the Mobile Angular UI demo page，上面有Mobile Angular UI的实践，如果你想了解的更深入一些，我建议你读一读 getting started with Mobile Angular UI。

Intel XDK

360桌面截图20141222093959.jpg

Intel XDK 是Inter开发的一款跨平台开发工具，我们可以很容易的通过Intel XDK开发应用，你需要做的只是下载他们的应用开发工具，有Linux、Windows和Mac版，它还提供了很多个开发框架，比如Twitter bootstrap, jQuery Mobile 和 Topcoat.

Appcelerator Titanium

360桌面截图20141222094046.jpg

Appcelerator’s Titanium 不同于其它框架的是，它是一个开源的框架。

Titanium是混合式移动应用开发的一站式解决方案，你只需要下载 Titanium studio就可以解决所有的事情，Titanium SDK包含了很多手机平台的APIs和后端云服务。

Titanium使用 Alloy，Alloy是一个快速开发的手机应用MVC框架，模块式开发可以大大减小开发时间，提高代码复用。

Titanium studio 还提供了一些code模板。你可以熟悉一下这些模板，相关的教程也很快会推出。

Sencha Touch

360桌面截图20141222094212.jpg

Sencha Touch 同样也是HTML5手机应用跨平台开发框架，运行iOS/Android/Blackberry。它已经诞生很多年了，现在已经成为很常用的混合式编程开发框架。

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。

下面是Sencha官方给出的几点特性

1.基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。

2.支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。

3.增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。

4.数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。

Kendo UI

360桌面截图20141222094258.jpg

Telerik’s Kendo UI 是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。

Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。

PhoneGap

360桌面截图20141222094329.jpg

PhoneGap 恐怕是最老的一个框架了，相信很多人都已经听说过甚至使用过它，但是PhoneGap是基于开源的 Cordova 商业版本。

第一段PhoneGap代码是在2008年8月的iPhoneDevCamp上写成的。创建它的一个主要动力是基于一个几乎每一个单独的iPhone开发新手都要面对的简单事实：Objective-C是一个对Web开发人员来说非常陌生的环境，并且Web开发人员的数量远远多于Objective-C开发人员的数量。

问题是，是否有人可以开发一个框架，让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识，而且仍旧可以同iPhone的重要本地应用程序(如摄像头和通讯录)交互呢？

就在那一年，PhoneGap获了奖并开始支持Android平台，对人数不断增长的移动开发人员变得越来越有用，这些人员需要在更多的平台上获得代码支持。

大家可以到PhoneGap documentation官方文档开始对PhoneGap的学习。

结论

在这篇文章中，我们讨论了一些HTML5的移动开发框架，HTML5标准正式发布之后，很多开发者对HTML5又重燃了希望，相信这是个美好的时代，相信它会给我们带来更多的惊喜。

以上就是带你认识HTML57个混合式移动开发框架的详细内容，更多请关注php中文网其它相关文章！

其中Sender需要做以下工作：

好了，下面我们看一个例子，这个例子展示了在页面中嵌套页面并且向子页面发送消息：

父页面如下：

<!DOCTYPE html> <html lang="en">  <head> <title> HTML5 Messaging Template File (One) </title> <link rel="stylesheet" type="text/css" href="../CSS/main.css"> <style> #frameTwo { float: left; width: 500px; height: 400px; margin: 0 5px; padding: 3px; border-top: 2px solid #3c6b92; border-left: 2px solid #3c6b92; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; } #content { height: 500px; } </style> <script type="text/javascript"> // 域名 var originTwo = ''; // URL地址 var URLTwo = ''; var windowTwo = null; function handleMessage(event) { // 判断源区域 if (event.origin == originTwo) { if(!windowTwo) windowTwo = event.source; log('message from origin: ' + event.origin); log(event.data); // 发送消息 windowTwo.postMessage('this is from windowOne!', originTwo); log('message sent back to windowTwo'); } else { dispError('message from untrusted origin: ' + event.origin); } } function init() { // 添加消息处理函数 window.addEventListener("message", handleMessage, false); window.onerror = windowErrorHandler; log('this is windowOne'); log('host: ' + location.host); // load two页面 element('frameTwo').src = URLTwo; // load the frame } // ##### Utilities ##### // shortcut for getElementById function element(id) { return document.getElementById(id); } function clearDisp() { element('pageResults').innerHTML = ''; element('message').innerHTML = ''; element('message').className = ''; } function dispMessage(message) { m = element('message'); m.className = 'message'; if(m.textContent.length > 0) { m.innerHTML += '<br />' + message; } else m.innerHTML = message; } function windowErrorHandler(message, filename, lineno) { dispError(message + ' (' + filename + ':' + lineno + ')' ); return true; }; function dispError(errorMessage) { element('pageResults').innerHTML += errorMessage ? '<p class="error">' + errorMessage + '</p>\n' : ''; } function log(m) { if(m.length < 1) return; logElement = element('log'); if(logElement.textContent.length > 0) logElement.innerHTML += '<br />'; logElement.innerHTML += nowTimeString() + ' ' + m; } function nowTimeString() { var d = new Date(); return numToString(d.getUTCHours(), 2) + ':' + numToString(d.getUTCMinutes(), 2) + ':' + numToString(d.getUTCSeconds(), 2) + '.' + numToString(d.getUTCMilliseconds(), 3); } function numToString( num, len ) { var num = num + ''; while(num.length < len) num = '0' + num; return num; } window.onload = init; </script> </head> <body> <p id="content"> <h1> HTML5 Messaging Template File (One) </h1> <p id="message"></p> <p id="pageResults"></p> <iframe id="frameTwo"> <p>Your browser doesn't support the iFrame feature</p> </iframe> <p id="log" style="font-family: monospace"></p> </p> </body> </html><!DOCTYPE html> <html lang="en">  <head> <title> HTML5 Messaging Template File (Two) </title> <link rel="stylesheet" type="text/css" href="../CSS/main.css"> <script type="text/javascript"> var originOne = ''; function handleMessage(event) { if (event.origin == originOne) { log('message from origin: ' + event.origin); log(event.data); } else { dispError('message from untrusted origin: ' + event.origin); } } // ##### Init ##### function init() { window.onerror = windowErrorHandler; // addEventListener doesn't provide the right error object in Firefox window.addEventListener("message", handleMessage, false); log('this is windowTwo'); log('host: ' + location.host); var windowOne = parent; windowOne.postMessage('this is from windowTwo!', originOne); log('message sent to windowOne'); } // ##### Utilities ##### // shortcut for getElementById function element(id) { return document.getElementById(id); } function clearDisp() { element('pageResults').innerHTML = ''; element('message').innerHTML = ''; element('message').className = ''; } function dispMessage(message) { m = element('message'); m.className = 'message'; if(m.textContent.length > 0) { m.innerHTML += '<br />' + message; } else m.innerHTML = message; } function windowErrorHandler(message, filename, lineno) { dispError(message + ' (' + filename + ':' + lineno + ')' ); return true; }; function dispError(errorMessage) { element('pageResults').innerHTML += errorMessage ? '<p class="error">' + errorMessage + '</p>\n' : ''; } function log(m) { if(m.length < 1) return; logElement = element('log'); if(logElement.textContent.length > 0) logElement.innerHTML += '<br />'; logElement.innerHTML += nowTimeString() + ' ' + m; } function nowTimeString() { var d = new Date(); return numToString(d.getUTCHours(), 2) + ':' + numToString(d.getUTCMinutes(), 2) + ':' + numToString(d.getUTCSeconds(), 2) + '.' + numToString(d.getUTCMilliseconds(), 3); } function numToString( num, len ) { var num = num + ''; while(num.length < len) num = '0' + num; return num; } window.onload = init; </script> </head> <body> <p id="content"> <h1> HTML5 Messaging Template File (Two) </h1> <p id="message"></p> <p id="pageResults"></p> <p id="log" style="font-family: monospace"></p> </p> </body> </html>

需要学习html5的同学请关注php中文网