HTNL5是2014年10月W3C推出的新标准,引入新的特性并对移动端更加友好.

canvas

<canvas>标签用于标记画布元素, 使用js脚本可以在画布上绘制自定义图形.

绘制矩形;

<canvas id="c1" width=110 height=90></canvas>

<script>
var c = document.getElementById("c1")
var ctx = c.getContext("2d")
ctx.fillStyle="DarkBlue";
ctx.fillRect(0,0,100, 80);
</script>

fillStyle可以是颜色,渐变或者图片url.

绘制线段:

	ctx.moveTo(0,0);
ctx.lineTo(80,80);
ctx.stroke();

moveTo指定起始位置(移动画笔), lineTo指定线段的结束位置, stroke方法进行绘制.

绘制圆弧:

	ctx.beginPath();
ctx.arc(20,20,20,0,2*Math.PI);
ctx.stroke();

arc方法的五个参数为:

  1. 圆心横坐标
  2. 圆心纵坐标
  3. 半径
  4. 起始弧度
  5. 终止弧度

绘制文本:

	ctx.font="Times new rome";
ctx.fillText("Hello World",20,20);
ctx.strokeText("Hello World",20,50);

两种绘制方法,绘制的效果不同,strokeText绘制空心图案.

绘制图形:

img = new Image()
img.src="url(...)"
ctx.drawImage(img, 20, 20)

线性渐变:

var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

createLinearGradient的四个参数指定起点和终点的坐标.

addColorStop()用于描述颜色参照点, 第一个参数为0~1之间的数指定位置.

径向渐变:

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

createRadialGradient的参数分别为起点圆的圆心坐标,半径和终点圆的圆心坐标,半径.

使用渐变填充:

ctx.fillStyle=grd;
ctx.fillRect(0,0,100, 80);

多媒体

HTML5标签提供了<video>标签来提供视频播放和播放控制功能:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 HTML5/video
</video>

目前<video>支持MP4, OGG和WebM格式.

video下可以有多个source元素, 浏览器会按照顺序尝试加载.

video标签的controls标记, 会自动在播放窗口上添加播放和音量控制组件.

当然也可以通过DOM来操作video, 调用play()pause()方法控制播放暂停, 并通过paused属性检查状态.

<audio>用法与<video>基本相同:

<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.wav" type="audio/wav">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持 HTML5/audio
</audio>

<audio>支持的类型有:

  • mp3

  • wav

  • ogg

WebSocket

传统的HTTP协议为请求-响应模式, 服务器难以主动向浏览器发送数据.这对开发交互式应用(如聊天,棋牌游戏)十分不便.

WebSocket是基于Http的双向通信协议, 它的接口类似Socket可以方便的开发交互应用.

创建WebSocket对象:

var ws = new WebSocket("ws://echo.websocket.org/");

WebSocket使用的协议为"ws", 上面这个服务端将会返回浏览器向其发送的字符串.

完成回调函数:

	ws.onopen = function() {
msg = 'Hi There';
ws.send(msg);
showMsg("send:" + msg);
}; ws.onmessage = function(event) {
showMsg("recv:" + event.data)
}; ws.onclose = function() {
showMsg("bye bye~")
};

完整源码参见websocket demo

拥抱HTML5的更多相关文章

  1. 拥抱HTML5 — Page Visibility(页面可见性) API介绍

    H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在 ...

  2. 拥抱 HTML5:storage 简介以及使用方法

    前言 storage 其实是个很简单的东西,基本上只要知道 javascript 中对象的概念,然后读完此文,storage 的用法也就了然于胸了. 简单来说,你可以把 storage 想象成是储存在 ...

  3. 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  4. html5的发展历程和由此引起的政治斗争

    2007年,乔布斯断言拒绝Flash并预言HTML5时代来临,IT行业就对HTML5产生了一股宗教热情.HTML5有着许多出众的特性,可以直接在网页上绘图.嵌入音视频.实现信息互动,可以跨越iOS.A ...

  5. HTML5定稿一周年,你必须要重新认识HTML5了

    原文网址链接:http://www.csdn.net/article/2015-11-24/2826317 去年此时,W3C定稿了HTML5.我曾发表一篇文章<HTML 5终于定稿,为什么原生A ...

  6. 二十八个 HTML5 特性与技巧

    1. New Doctype  你还在使用令人讨厌的难记的XHTML文档类型声明吗?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  7. HTML5面试题-备

    万不可投机取巧.只求当时过关,非长久之计也!(感谢大神分享) 面试有几点需要注意: 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑. 题目类型: 技术视野.项目细节.理论知 ...

  8. HTML5之美

    如今大热的HTML5到底美在哪里?HTML5到底能为实际的移动开发带来哪些改变?来自阿里云云手机服务运营部的前端开发工程师正邪 (廖健)分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从C ...

  9. html5/css3常考面试题

    一.HTML5 CSS3 CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gra ...

随机推荐

  1. 解决UNIGUI字体太小的问题

    解决UNIGUI字体太小的问题 Unigui运行在chrome浏览器下可以有最佳的效果,但用ie打开用unigui做的项目会发现字体明显小一截,可以用自定义css来解决这个问题. 可以在UniServ ...

  2. php开发工具,zendstudio13使用方法补丁

    官网原版下载http://downloads.zend.com/studio ... win32.win32.x86.exe 破解补丁:链接:http://pan.baidu.com/s/1gdi4U ...

  3. 三、winForm-DataGridView操作——DataGridView 操作复选框checkbox

    一.添加复选框 ArrayList arr = new ArrayList(); public string checkboxName = "选择"; void StandLibW ...

  4. C#系统登录随机验证码生成及其调用方法

    话不多说,直接上代码 public ValidateCode() { } /// <summary> /// 验证码的最大长度 /// </summary> public in ...

  5. 【转】PowerDesigner快捷键

    一般快捷键 快捷键 说明 F4 打开检查模型窗口,检查模型 F5 如果图窗口内的图改变过大小,恢复为原有大小即正常大小 F6 放大图窗口内的图 F7 缩小图窗口内的图 F8 在图窗口内中查看全部图内容 ...

  6. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...

  7. Flask中的before_request和after_request

    1.@app.before_request 在请求(request)之前做出响应 @app.before_request 也是一个装饰器,他所装饰的函数,都会在请求进入视图函数之前执行 2.@app. ...

  8. AWD比赛常规套路

    作者:Leafer   本文属于Arctic shell原创内容计划文章,转载请注明原文地址! 比赛环境:纯净win10,最新版kali,securecrt或者WinSCP 在进入服务器后应进行的常规 ...

  9. 【xsy2504】farm 容斥原理

    题目大意:给你三个数$n,m,s$,满足$n,m,s≤10^{18}$且最大质因数均不大于$10^6$. 问你存在多少个整数$k$,满足$0≤k≤m$,且$(k,0)$,$(0,n)$,$(x,y)$ ...

  10. [Umbraco] 创建第一个页面

    如何创建一个页面,很简单. 进入settings,首先右键点击“Document Types”, 在出现的菜单点击"Create",在弹出的窗口中 Master Document ...