一、画布(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. nodeJS分层

    一.nodeJS分层 分为三层: - 表现层:接受用户数据,并封装 - 服务层:与公司业务有关的东西,处理判断呀什么的 - 持久层:与数据库有关的    表现层:page与表现层的数据传递,route ...

  2. ubuntu下python3安装scrapy,OpenSSL

    环境:ubuntu 16.04  ,  python3.5.1+ 安装顺序如下: sudo apt-get install build-essential sudo apt-get install p ...

  3. hdu 3934 Summer holiday(凸包最大内接三角形)

    求n个点能组成的最大三角形,一发旋转卡壳模板题... #include<algorithm> #include<iostream> #include<cstring> ...

  4. java集合系列——Map之TreeMap介绍(九)

    一.TreeMap的简介 TreeMap是一个有序的key-value集合,基于红黑树(Red-Black tree)的 NavigableMap实现.该映射根据其键的自然顺序进行排序,或者根据创建映 ...

  5. vim 批量注释和批量取消注释

    批量注释 按ctrl+v进入可视块模式, 上下移动选中需要注释的行, 按I, 输入注释符号#, 按两下Esc, 保存   批量取消注释 按ctrl+v进入可视块模式, 上下移动选中需要取消注释的行, ...

  6. 痞子衡嵌入式:恩智浦MCU安全加密启动一站式工具NXP-MCUBootUtility用户指南

    NXP MCU Boot Utility English | 中文 1 软件概览 1.1 介绍 NXP-MCUBootUtility是一个专为NXP MCU安全加密启动而设计的工具,其特性与NXP M ...

  7. ocelot 自定义认证和授权

    ocelot 自定义认证和授权 Intro 最近又重新启动了网关项目,服务越来越多,每个服务都有一个地址,这无论是对于前端还是后端开发调试都是比较麻烦的,前端需要定义很多 baseUrl,而后端需要没 ...

  8. Django反正解析路由

    首先要了解为什么要定义反响解析 因为随着功能的增加会出先非常多的视图和对应的路由,有可能项目的一些需要一些模板需要重写路由,或之前配置的正则表达式不够准确,于是就要修改正则表达式,但是路由或正则表达式 ...

  9. 快速创建IIS站点并设置权限

     net user WebSiteUser WebSiteUserWebSiteUser /add /yWMIC Path Win32_UserAccount Where Name="Web ...

  10. driver.get()和driver.navigate().to()到底有什么不同?-----Selenium快速入门(四)

    大家都知道,这两个方法都是跳转到指定的url地址,那么这两个方法有什么不同呢?遇到这种情况,第一反应就是查查官方的文档. 官方文档的说法是:Load a new web page in the cur ...