来自：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. AnyConnect使用说明(电脑版Windows)

    一.下载客户端 Anyconnect支持Windows.Mac电脑. 二.安装 1.双击打开下载的文件,点“Next”开始安装. 2.选择“I accept …”,再点下一步. 3.点“Install ...

  2. Django的配置文件(settings)

    静态文件设置: 一.概述: #静态文件交由Web服务器处理,Django本身不处理静态文件.简单的处理逻辑如下(以nginx为例): # URI请求-----> 按照Web服务器里面的配置规则先 ...

  3. Bootstrap3 概述

    注意:HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. <!DOCT ...

  4. Android开发之手把手教你写ButterKnife框架（三）

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52672188 本文出自:[余志强的博客] 一.概述 上一篇博客讲了, ...

  5. TV Metro界面（仿泰捷视频TV版）源码解析

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52822499 前言:上一篇介绍了 ...

  6. Dynamics CRM2013 6.1.1.1143版本插件注册器的一个bug

    最近在做的项目客户用的是CRM2013sp1版本,所以插件注册器使用的也是与之对应的6.1.1.1143,悲剧的事情也因此而开始. 在插件中注册step时,工具里有个run in user's con ...

  7. 协议系列之TCP协议

    3.TCP协议 从上一节我们了解了什么是IP协议,以及IP协议的一些特性,利用IP协议传输都是单向的,不可靠的,无连接状态的.正是这些特性,于是便产生了TCP协议.TCP协议属于传输层,在IP协议网络 ...

  8. Java 单元测试 JUnit4 快速入门

    JUnit最佳实践 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 public class CardServiceTest {     /**      * 最佳 ...

  9. FFmpeg的HEVC解码器源代码简单分析：解析器（Parser）部分

    ===================================================== HEVC源代码分析文章列表: [解码 -libavcodec HEVC 解码器] FFmpe ...

  10. Linux目录架构详解

    Linux和Windows操作系统的显著区别之一就是目录架构的不同.Linux操作系统的目录架构遵循文件系统层级结构标准.不知你是否使用ls命令浏览过Linux的根目录"/",亲爱 ...