来自：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. Vue 踩坑记

    参考: https://forum.vuejs.org/t/unknown-issues-in-change-event-of-radio-in-vue-2-x-webpack-2-x/11034 v ...

  2. TCP发送源码学习(2)--tcp_write_xmit

    一.tcp_write_xmit()将发送队列上的SBK发送出去,返回值为0表示发送成功.函数执行过程如下:1.检测拥塞窗口的大小.2.检测当前报文是否完全处在发送窗口内.3.检测报文是否使用nagl ...

  3. Objective-C 中如何测量代码的效率

    背景 在我们编程的时候,可能经常会有一些疑问: * 我们写的某个方法的执行效率是多少? * 方法 A 和 方法 B 哪个更快? 因此,我们不可避免的要用到一些方法来计算代码的执行效率.计算代码的执行效 ...

  4. 剑指Offer——知识点储备-Java基础

    剑指Offer--知识点储备-Java基础 网址来源: http://www.nowcoder.com/discuss/5949?type=0&order=0&pos=4&pa ...

  5. Apache Beam—透视Google统一流式计算的野心

    Google是最早实践大数据的公司,目前大数据繁荣的生态很大一部分都要归功于Google最早的几篇论文,这几篇论文早就了以Hadoop为开端的整个开源大数据生态,但是很可惜的是Google内部的这些系 ...

  6. ssh远程登录操作 和ssh信任

    ssh 可以参考上一篇telnet的文章 1.安装openssh-server     sudo dpkg -i openssh-client_1%3a5.5p1-4ubuntu6_i386.deb ...

  7. android拍照获得图片及获得图片后剪切设置到ImageView

    ok,这次的项目需要用到设置头像功能,所以做了个总结,直接进入主题吧. 先说说怎么 使用android内置的相机拍照然后获取到这张照片吧 直接上代码: Intent intentFromCapture ...

  8. 【Netty源码分析】Netty服务端bind端口过程

    这一篇博客我们介绍一下Netty服务端绑定端口的过程,我们通过跟踪代码一直到NIO原生绑定端口的操作. 绑定端口操作 ChannelFuture future = serverBootstrap.bi ...

  9. UE4成批处理透明材质

    项目中需要控制成批的物体的透明度,但是默认的时候他又不能是透明的,对,项目的要求就这么诡异. 然而却没有找到设置材质的BlendMode的功能,于是只有换了一种办法,物体需要透明时更换为透明材质,默认 ...

  10. 6.1、Android Studio的Android Monitor概览

    Android Monitor帮助你监测你的应用的性能,以帮助你合理的进行优化,调试,提升.如下功能: 1. Log消息,系统定义的或者开发者定义的. 2. 内存,CPU和GPU使用情况. 3. 网络 ...