拥抱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方法的五个参数为:
- 圆心横坐标
- 圆心纵坐标
- 半径
- 起始弧度
- 终止弧度
绘制文本:
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的更多相关文章
- 拥抱HTML5 — Page Visibility(页面可见性) API介绍
H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在 ...
- 拥抱 HTML5:storage 简介以及使用方法
前言 storage 其实是个很简单的东西,基本上只要知道 javascript 中对象的概念,然后读完此文,storage 的用法也就了然于胸了. 简单来说,你可以把 storage 想象成是储存在 ...
- 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】
吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...
- html5的发展历程和由此引起的政治斗争
2007年,乔布斯断言拒绝Flash并预言HTML5时代来临,IT行业就对HTML5产生了一股宗教热情.HTML5有着许多出众的特性,可以直接在网页上绘图.嵌入音视频.实现信息互动,可以跨越iOS.A ...
- HTML5定稿一周年,你必须要重新认识HTML5了
原文网址链接:http://www.csdn.net/article/2015-11-24/2826317 去年此时,W3C定稿了HTML5.我曾发表一篇文章<HTML 5终于定稿,为什么原生A ...
- 二十八个 HTML5 特性与技巧
1. New Doctype 你还在使用令人讨厌的难记的XHTML文档类型声明吗?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- HTML5面试题-备
万不可投机取巧.只求当时过关,非长久之计也!(感谢大神分享) 面试有几点需要注意: 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑. 题目类型: 技术视野.项目细节.理论知 ...
- HTML5之美
如今大热的HTML5到底美在哪里?HTML5到底能为实际的移动开发带来哪些改变?来自阿里云云手机服务运营部的前端开发工程师正邪 (廖健)分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从C ...
- html5/css3常考面试题
一.HTML5 CSS3 CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gra ...
随机推荐
- uva 10918 - Tri Tiling(规律)
题目链接:uva 10918 - Tri Tiling 题目大意:给出n,计算用1*2的瓷砖有多少种方法铺满3*n的地方. 解题思路:和uva 10359 - Tiling有点相似,不过难度会比较大, ...
- asp.net core mvc 中间件之WebpackDevMiddleware
asp.net core mvc 中间件之WebpackDevMiddleware WebpackDevMiddleware中间件主要用于开发SPA应用,启用Webpack,增强网页开发体验.好吧,你 ...
- WinForm中DataGridView的TextBoxColumm换行
一.内容超过显示宽度自动换行: 在需要自动换行的列中设置 二.换行符换行: 一开始在需要换行的文本添加"\r\n"并不能直接换行,DGV直接把\r\n显示出来了,后换成 Syste ...
- CentOS7下让Asp.Net Core的网站自动运行
一.安装Nginx yum install nginx 二.配置Nginx vi /etc/nginx/nginx.conf location / { proxy_pass http://127.0. ...
- SQL2014 尝试读取或写入受保护的内存。这通常指示其他内存已损坏
管理员身份运行 cmd -> 输入 netsh winsock reset
- 日期时间类:Date,Calendar,计算类:Math
日期时间类 计算机如何表示时间? 时间戳(timestamp):距离特定时间的时间间隔. 计算机时间戳是指距离历元(1970-01-01 00:00:00:000)的时间间隔(ms). 计算机中时间2 ...
- storm安装以及简单操作
storm的安装比较简单,下面以storm的单节点为例说明storm的安装步骤. 1.storm的下载 进入storm的官方网站http://storm.apache.org/,点击download按 ...
- [Vuejs] webpack+vue-cli打包如何引用相对路径
默认情况下通过webpack+vuec-li打包的css.js等资源,路径都是绝对的,即static在根目录下,假如部署到带有文件夹目录的项目中,资源路径就会出错,如何解决. 1.修改资源引用相对路径 ...
- odoo按钮图标 icon
https://www.slideshare.net/TaiebKristou/odoo-icon-smart-buttons http://www.iconfont.cn/collections/d ...
- oracle 切换用户操作--or--sys用户密码忘记
1.sqlplus中以普通用户登录oracle后, 普通用户的登录方式: sqlplus /nolog conn 用户名/密码@IP地址/orcl:1521; 这个时候,想要切换sys用户,conn ...