一、画布（Canvas)

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>

<body>

<h1>html5-坦克大战</h1>

<!--坦克大战的战场-->

<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>

<script type="text/javascript">

  //得到画布

  var canvas1 = document.getElementById("tankMap");

  //定义一个位置变量

  var heroX = 80;

  var heroY = 80;

  //得到绘图上下文

  var cxt = canvas1.getContext("2d");

  //设置颜色

  cxt.fillStyle="#BA9658";

  //左边的矩形

  cxt.fillRect(heroX,heroY,5,30);

  //右边的矩形

  cxt.fillRect(heroX+17,heroY,5,30);

  //画中间的矩形

  cxt.fillRect(heroX+6,heroY+5,10,20);

  //画出坦克的盖子

  cxt.fillStyle="#FEF26E";

  cxt.arc(heroX+11,heroY+15,5,0,360,true);

  cxt.fill();

  //画出炮筒

  cxt.strokeStyle="#FEF26E";

  cxt.lineWidth=1.5;

  cxt.beginPath();

  cxt.moveTo(heroX+11,heroY+15);

  cxt.lineTo(heroX+11,heroY);

  cxt.closePath();

  cxt.stroke();

</script>

</body>

</html>

　尝试一下运行效果

运行效果如下：

2、地址位置

Html5的地理位置特性可以返回网页访问者的地理位置

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>第八基地菜鸟教程(noob.d8jd.com)</title>

</head>

<body>

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>

<button onclick="getLocation()">点我</button>

<script>

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else

{

x.innerHTML="该浏览器不支持获取地理位置。";

}

}

function showPosition(position)

{

x.innerHTML="纬度: " + position.coords.latitude +

"<br>经度: " + position.coords.longitude;

}

</script>

</body>

</html>

　点击运行，看看效果吧

3、丰富强大的表单

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

4、本地存储

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

5、媒体

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

<!DOCTYPE HTML>

<html>

<body>

<video src="/i/movie.ogg" controls="controls">

your browser does not support the video tag

</video>

</body>

</html>

　　运行效果如下：

6、语音搜素功能：

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

注意：x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。
实现过程大概是捕捉到语音后，数据发送到google的服务器进行语音识别，然后返回结果。所以没有足够强大大的研发能力和服务器资源，真没法支持这个服务。
作为普通话不标准经常被别人吐槽的人，使用语音搜索还是能十分准确地返回关键词，我顿时感动得一塌糊涂。

<!DOCTYPE html>

<head>

  <meta charset="utf-8"/>

</head>

<body>

  <h1>语音搜素功能</h1>

  <input type="text" name="yuyin" id="yuyin" x-webkit-speech/>

</body>

点击看看效果:

HTML5新特性有哪些，你都知道吗的更多相关文章

  1. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  2. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  3. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  4. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  5. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  6. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  7. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  8. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  9. HTML5新特性：FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  10. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

随机推荐

  1. 【.net 深呼吸】细说CodeDom（7）：索引器

    在开始正题之前,先补充一点前面的内容. 在方法中,如果要引用方法参数,前面的示例中,老周使用的是 CodeVariableReferenceExpression 类,它用于引用变量,也适用于引用方法参 ...

  2. C语言 · 4_2找公倍数

    问题描述 这里写问题描述. 打印出1-1000所有11和17的公倍数. 样例输入 一个满足题目要求的输入范例.例:无 样例输出 与上面的样例输入对应的输出.例:   代码如下: #include< ...

  3. 在.Net中实现自己的简易AOP

    RealProxy基本代理类 RealProxy类提供代理的基本功能.这个类中有一个GetTransparentProxy方法,此方法返回当前代理实例的透明代理.这是我们AOP实现的主要依赖. 新建一 ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统（72）-微信公众平台开发-消息处理

    系列目录 前言 Senparc.Weixin.MP SDK提供了MessageHandler消息处理类 在作者的Wiki中也详细说明了如何定义这个类,下面我们来演示,消息的回复,及效果 了解Messa ...

  5. 使用mybatis-generator在自动生成Model类和Mapper文件

    使用mybatis-generator插件可以很轻松的实现mybatis的逆向工程,即,能通过表结构自动生成对应的java类及mapper文件,可以大大提高工作效率,并且它提供了很多自定义的设置可以应 ...

  6. javascript之闭包理解以及应用场景

    半个月没写博文了,最近一直在弄小程序,感觉也没啥好写的. 之前读了js权威指南,也写了篇博文,但是实话实说当初看闭包确实还是一头雾水.现在时隔一个多月(当然这一段时间还是一直有在看闭包的相关知识)理解 ...

  7. [数据结构]——堆（Heap）、堆排序和TopK

    堆(heap),是一种特殊的数据结构.之所以特殊,因为堆的形象化是一个棵完全二叉树,并且满足任意节点始终不大于(或者不小于)左右子节点(有别于二叉搜索树Binary Search Tree).其中,前 ...

  8. dedecms 后台栏目添加图片

    前台调用栏目时需要显示图标,整理一下: 第一步:“系统->SQL命令工具” , 插入sql语句 alter table dede_arctype add typeimg varchar() 第二 ...

  9. BPM配置故事之案例13-触发消息通知

    老李:小明! 小明:--见你就没好事,又要我干嘛? 老李:额,小事小事,最近很多部门都觉得Boss的审批速度太慢了,能不能以后给审批人一个消息提醒? 小明:--有一种不太好的预感 老李:怎么,很困难么 ...

  10. Dynamics CRM 之ADFS 使用 WID 的联合服务器场

    使用 WID 的联合服务器场 默认拓扑 Active Directory 联合身份验证服务 (AD FS) 是联合服务器场,使用 Windows 内部数据库 (WID). 在这种拓扑, AD FS 使 ...