来自：http://blog.csdn.net/dawanganban/article/details/17592787

一、画布（Canvas)

画布是网页中的一块区域，可所以用JavaScript在上面绘图。下面我们来创建一个画布并在上面绘制一个坦克（后面将用HTML5做一个坦克大战游戏），代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. </head>
  6. <body>
  7. <h1>html5-坦克大战</h1>
  8. <!--坦克大战的战场-->
  9. <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
  10. <script type="text/javascript">
  11. //得到画布
  12. var canvas1 = document.getElementById("tankMap");
  13. //定义一个位置变量
  14. var heroX = 80;
  15. var heroY = 80;
  16. //得到绘图上下文
  17. var cxt = canvas1.getContext("2d");
  18. //设置颜色
  19. cxt.fillStyle="#BA9658";
  20. //左边的矩形
  21. cxt.fillRect(heroX,heroY,5,30);
  22. //右边的矩形
  23. cxt.fillRect(heroX+17,heroY,5,30);
  24. //画中间的矩形
  25. cxt.fillRect(heroX+6,heroY+5,10,20);
  26. //画出坦克的盖子
  27. cxt.fillStyle="#FEF26E";
  28. cxt.arc(heroX+11,heroY+15,5,0,360,true);
  29. cxt.fill();
  30. //画出炮筒
  31. cxt.strokeStyle="#FEF26E";
  32. cxt.lineWidth=1.5;
  33. cxt.beginPath();
  34. cxt.moveTo(heroX+11,heroY+15);
  35. cxt.lineTo(heroX+11,heroY);
  36. cxt.closePath();
  37. cxt.stroke();
  38. </script>
  39. </body>
  40. </html>

运行效果：

二、地理位置

HTML5的地理位置特性可以返回网页访问者的地理位置。运行下面代码进行测试：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo">点击这个按钮，获得您的位置：</p>
  5. <button onclick="getLocation()">试一下</button>
  6. <div id="mapholder"></div>
  7. <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  8. <script>
  9. var x=document.getElementById("demo");
  10. function getLocation()
  11. {
  12. if (navigator.geolocation)
  13. {
  14. navigator.geolocation.getCurrentPosition(showPosition,showError);
  15. }
  16. else{x.innerHTML="Geolocation is not supported by this browser.";}
  17. }
  18. function showPosition(position)
  19. {
  20. lat=position.coords.latitude;
  21. lon=position.coords.longitude;
  22. latlon=new google.maps.LatLng(lat, lon)
  23. mapholder=document.getElementById('mapholder')
  24. mapholder.style.height='250px';
  25. mapholder.style.width='500px';
  26. var myOptions={
  27. center:latlon,zoom:14,
  28. mapTypeId:google.maps.MapTypeId.ROADMAP,
  29. mapTypeControl:false,
  30. navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  31. };
  32. var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  33. var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  34. }
  35. function showError(error)
  36. {
  37. switch(error.code)
  38. {
  39. case error.PERMISSION_DENIED:
  40. x.innerHTML="User denied the request for Geolocation."
  41. break;
  42. case error.POSITION_UNAVAILABLE:
  43. x.innerHTML="Location information is unavailable."
  44. break;
  45. case error.TIMEOUT:
  46. x.innerHTML="The request to get user location timed out."
  47. break;
  48. case error.UNKNOWN_ERROR:
  49. x.innerHTML="An unknown error occurred."
  50. break;
  51. }
  52. }
  53. </script>
  54. </body>
  55. </html>

运行结果：

三、丰富强大的表单

HTML5提供了表单增强特性，这些功能是由复杂的JavaScript编写的，以便能在所有浏览器上工作.

四、本地存储

HTML5本地存储类似于cookies，但它支持存储的数据量更大，并且提供了一个本地数据库引擎，从而使保持和获取数据更加容易。这个特点可以很好的将数据分发给用户缓解与服务器的连接压力。另外可以使用JavaScript从本地Web页面中访问本地数据库，这意味着你可以将网页保存到你本地从公司回到家里不用连接互联网就能打开。

五、媒体

HTML5规范中最具亮点的部分也许就是HTML5浏览器内置的多媒体播放功能，不需要Flash、Microsoft Media Player等插件。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <video src="/i/movie.ogg" controls="controls">
  5. your browser does not support the video tag
  6. </video>
  7. </body>
  8. </html>

运行效果：

六、语音搜素功能：

大家现在可以在好多网站上看到语音搜素功能，HTML5提供了强大的语音搜素功能属性，只需要添加一个属性就可以实现。

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8"/>
  4. </head>
  5. <body>
  6. <h1>语音搜素功能</h1>
  7. <input type="text" name="yuyin" id="yuyin" x-webkit-speech/>
  8. </body>

小强的HTML5移动开发之路（2）——HTML5的新特性的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  9. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

  10. 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

随机推荐

  1. URL重定向漏洞，python打造URL重定向漏洞检测脚本

    前言: 今天学习了重定向漏洞,这个漏洞比较好理解 漏洞名:URL重定向漏洞 威胁:低 漏洞的来源:开发者对head头做好对应的过滤和限制 例子: 有漏洞的网站:http://a.com/x.php?u ...

  2. Oracle12c中SQL性能优化（SQL TUNING）新特性之自动重优化（automatic reoptimization）

    Oracle12c中的自动重优化 Oracle12c中的自适应查询优化有一系列不同特点组成.像自适应计划(AdaptivePlans)功能可以在运行时修改执行计划,但并不允许计划中连接顺序的改变.自动 ...

  3. Request JSON

    https://developer.android.com/training/volley/request.html Request JSON Volley provides the followin ...

  4. 让你的代码量减少3倍！使用kotlin开发Android(四) kotlin bean背后的秘密

    上一篇我们介绍了缩短五倍的java bean,不知道你在看的时候有没有一种疑问捏? 本文同步自博主的私人博客wing的地方酒馆 再来回顾一下,两种代码的对比 public class User { p ...

  5. Dynamics CRM 部署NLB后使用群集名称访问弹验证框验证不过的解决方法

    自上次部署NLB到现在已有段时间了,今天部署完后遇到了个问题,上次也遇到过但忘记了,本篇作为对该问题的一个记录,部署文档:https://blogs.msdn.microsoft.com/niran_ ...

  6. CountDownLatch使用

    分享牛原创,CountDownLatch类的使用,CountDownLatch是一个工具类,运行主线程开启子线程的时候,子线程还没有结束的时候,主线程可以一直等待,直到初始化的现成的计数器count为 ...

  7. 关于在arm裸板编程时使用printf问题的解决方法

    在ARM裸板驱动编程中,是不允许程序直接调用C库程序的.为什么呢?因为此时kernel还没有被加载,所以在封装在kernel层的C库的API是用不了的,那怎么办? 在开发过程中,printf的功能我不 ...

  8. 动手试试Android Studio插件开发

    由于业务关系,经常需要写一些表单页面,基本也就是简单的增删改查然后上传,做过几个页面之后就有点想偷懒了,这么低水平重复性的体力劳动,能不能用什么办法自动生成呢,查阅相关资料,发现android stu ...

  9. Dynamics CRM 通过Odata创建及更新记录各类型字段的赋值方式

    CRM中通过Odata方式去创建或者更新记录时,各种类型的字段的赋值方式各不相同,这里转载一篇博文很详细的列出了各类型字段赋值方式,以供后期如有遗忘再次查询使用. http://luoyong0201 ...

  10. ROS探索总结（十六）——HRMRP机器人的设计

    1. HRMRP简介         HRMRP(Hybrid Real-time Mobile Robot Platform,混合实时移动机器人平台)机器人是我在校期间和实验室的其他小伙伴一起从零开 ...