拥抱HTML5

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