HTML5(一)
·HTML5出现了一些新的特性
1· 用于绘画的 canvas 元素
2· 用于媒介回放的 video 和 audio 元素
3· 对本地离线存储的更好的支持
4· 新的特殊内容元素，比如 article、footer、header、nav、section
5· 新的表单控件，比如 calendar、date、time、email、url、search等
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="230" height="120" style="border:1px solid darkred"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
//绘制一个红色矩形
// cxt.fillStyle="#FF0000";
// cxt.fillRect(0,0,150,75);
//绘制一条线,
// cxt.moveTo(0,0);
// cxt.lineTo(100,80);
// cxt.lineTo(45,30);
// cxt.lineTo(10,29);
// cxt.stroke();
//绘制一个圆
// cxt.fillStyle="blue";
// cxt.beginPath();
// cxt.arc(25,25,25,0,1.5*Math.PI,false);
// cxt.closePath();
// cxt.fill();
//绘制渐变效果
// var grd=cxt.createLinearGradient(0,0,200,62);
// grd.addColorStop(0,"red");
// grd.addColorStop(1,"white");
// cxt.fillStyle=grd;
// cxt.fillRect(0,0,200,62);
//图像
var img=new Image();
img.src="timg1.png";
//在画布上定位图像
// cxt.drawImage(img,10,0);
//在画布上定位图像，并规定图像的宽度和高度
//cxt.drawImage(img,10,10,160,80);
//剪切图像，并在画布上定位被剪切的部分：
cxt.drawImage(img,70,60,90,80,20,20,90,80);
</script>
</body>
</html>control 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的
视频<video>标签: ogg,MP4,Webm
如:<video src="movie.ogg" controls="controls"></video>
controls="controls" autoplay="autoplay" loop="loop" preload="auto" src="song.ogg"
音频<audio>标签:ogg,MP3,Wav
例如:<audio src=”song.ogg” type=”audio/ogg”></audio>
音频<audio>标签:ogg,MP3,Wav
例如:<audio src=”song.ogg” type=”audio/ogg”></audio>
拖放:
画布:Canvas
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect方法规定了形状、位置和尺寸。
画线条:moveTo()起点,lineTo()指向点,stroke()完成定义的图像
画圆:context.arc(x,y,r,sAngle,eAngle,counterclockwise);
X,X坐标,y,y坐标,r半径,sAngle起始角度,eAngle结束角度
Counterclockwise为方向,true为逆时针,false为顺时针
fill() 方法填充当前的图像（路径）。默认颜色是黑色。
用 fillStyle 属性来填充另一种颜色/渐变。
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
content.beginPath();//开始绘画
content.closePath();//结束绘画
渐变:context.createLinearGradient(x0,y0,x1,y1);
x0,y0,x1,y1分别是渐变点开始的X坐标,y坐标,结束的X坐标,y坐标
addColorStop() 方法规定 gradient 对象中的颜色和位置。
addColorStop() 方法与 createLinearGradient() 或createRadialGradient() 一起使用。
可以多次调用 addColorStop()方法来改变渐变。如果不对 gradient对象使用该方法，那么渐变将不可见。为了获得可见的渐变，至少需要创建一个色标。
gradient.addColorStop(stop,color);
stop,0-1之间
图像:将图片放在画布上canvas drawImage()方法
在画布上定位图像：
context.drawImage(img,x,y);
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
//在画布上添加视频
element.addEventListener(event, function, useCapture)
事件,函数方法,布尔值,冒泡方式
true -事件句柄在捕获阶段执行
false- false-默认。事件句柄在冒泡阶段执行
addEventListener()指向指定元素添加句柄,
removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄
var v=document.getElementById("video1");
v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
参考资料:http://www.w3school.com.cn/index.html