来自：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. Java并发编程（一）-为什么要并发

    并发所带来的好处 1. 并发在某些情况(并不是所有情况)下可以带来性能上的提升 1) 提升对CPU的使用效率 提升多核CPU的利用率:一般来说一台主机上的会有多个CPU核心,我们可以创建多个线程,理论 ...

  2. 1. 两数之和 LeetCode

    给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [, , , ], target = 因为 n ...

  3. 记一次MySQL删库的数据恢复

    昨天因为不可描述的原因,数据库直接被 drop database删除.在第一时间停止数据库服务和Web服务,备份MySQL数据目录下的所有文件之后,开始走上数据恢复之路. 第一次干这种事,各种不得法. ...

  4. 20160208.CCPP体系详解(0018天)

    程序片段(01):main.c 内容概要:PointWithOutInit #include <stdio.h> #include <stdlib.h> //01.野指针详解: ...

  5. JVM远程DEBUG（JPDA ）

    原理 1. JPDA简介 JPDA(Java Platform Debugger Architecture)为Java平台上的调试器定义了一个标准的体系结构.该体系结构包括3个主要组成部分:JVM T ...

  6. Android App之间通过Intent交互

    Android 最重要的功能之一是应用能够基于它要执行的"操作"向另一个应用发送用户. 例如,如果您的应用有您要在地图上显示的公司地址,您无需在显示地图的应用中构建 Activit ...

  7. android 网络工具 之Android-Volley的demo

    1.今天详细的研究了Volley的使用,下面来给大家介绍一下: Android Volley 是Google开发的一个网络lib,可以让你更加简单并且快速的访问网络数据.Volley库的网络请求都是异 ...

  8. python 如何优雅地退出子进程

    python 如何优雅地退出子进程 主进程产生子进程,子进程进入永久循环模式.当主进程要求子进程退出时,如何能安全地退出子进程呢? 参考一些代码,我写了这个例子.运行之后,用kill pid试试.pi ...

  9. Struts 2 标签库

    <s:if>标签 拥有一个test属性,其表达式的值用来决定标签里内容是否显示 <s:if test="#request.username=='clf'"> ...

  10. Python模块探秘 Smtplib发送带有各种附件的邮件

    这两天对Python的邮件模块比较感兴趣,于是就查了查资料.同时在实际的编码过程中也遇到了各种各样的问题.下面我就来分享一下我与smtplib的故事. 前提条件 我的上一篇博文里面讲解了,发送邮件必须 ...