来自：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. Docker 镜像

    Docker 镜像就是一个只读的模板. 例如:一个镜像可以包含一个完整的 ubuntu 操作系统环境,里面仅安装了 Apache 或用户需要的其它应用程序. 镜像可以用来创建 Docker 容器. D ...

  2. CRM客户关系管理系统（七）

    第七章.动态modelform功能实现  7.1.动态modelform的实现 (1)给第一列添加一个a标签 kingadmintag.py (2)kingadmin/urls.py urlpatte ...

  3. iOS控制反转(IoC)与依赖注入(DI)的实现

    背景 最近接触了一段时间的SpringMVC,对其控制反转(IoC)和依赖注入(DI)印象深刻,此后便一直在思考如何使用OC语言较好的实现这两个功能.Java语言自带的注解特性为IoC和DI带来了极大 ...

  4. 微信小程序基础之在微信上显示和体验小程序？

    随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小 ...

  5. android studio 转为eclipse快捷键后还存在的问题汇总

    提取局部变量:Ctrl+Alt+V 提取全局变量:Ctrl+Alt+F 提取方法:Shit+Alt+M 使用android studio 出现红色下划线代表有错误产生,eclipse中的Ctrl+1( ...

  6. 深度学习与计算机视觉系列(2)_图像分类与KNN

    作者: 寒小阳 &&龙心尘 时间:2015年11月. 出处: http://blog.csdn.net/han_xiaoyang/article/details/49949535 ht ...

  7. HDFS的读数据过程分析

    我们继续在 FileSystem 类分析,读数据使用的是 open(-)方法,我们可以看到源码 FSDataInputStream in = fileSystem.open(new Path(&quo ...

  8. FFmpeg的HEVC解码器源代码简单分析：环路滤波（Loop Filter）

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

  9. SQL Server专家的10个秘诀（翻译加注解）

    当你点开这篇文章的时候,如果觉得没有读下去的必要,也希望你能拉到最后看看那几行字! 原文出处:https://technet.microsoft.com/en-us/magazine/gg299551 ...

  10. SQL Server性能优化——等待——SLEEP_BPROOL_FLUSH

    前言: 有一个用于历史归档的数据库(简称历史库),经过一定时间的积累,数据文件已经达到700多GB,后来决定某些数据可以不需要保留,就把这部分数据truncate了,空余出600多GB的空间,也就是说 ...