这里区分了功能类的（这个分类只是我自己分的，千万不要以为事官方定义），是因为我认为这些标签具有特别的功能，或者十分重要。说实话，语义标签里面，因为带有默认样式的缘故，很多元素的实用性其实并不高（不同浏览器的默认样式不同）。所以这一章我单独分开了一些元素，以及他们提供的API，写在这里。
媒介元素
音视频元素audio/video
这里主要写两个元素，audio和video，可能会有人说，还有一个embed呢，首先embed我没有用过，其次在网上浏览的时候，看到一个总结object和embed的帖子，大意就是embed无法动态渲染，这也就是说无法使用jq进行dom操作（要了老命了），所以这里只说audio和video。
HTML5 Audio/Video 方法
canPlayType() 检测是否能播放，返回三个值：
"probably" - 浏览器最可能支持该音频/视频类型
"maybe" - 浏览器也许支持该音频/视频类型
"" - （空字符串）浏览器不支持该音频/视频类型
load() 重新加载音视频
play() 播放音视频
pause() 暂停音视频
HTML5 Audio/Video 属性
autoplay 设置或返回是否在加载完成后随即播放音频/视频
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackrate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
loop 设置或返回音频/视频是否应在结束时重新播放
paused 设置或返回音频/视频是否暂停
seeking 返回用户是否正在音频/视频中进行查找。该属性返回用户目前是否在音频/视频中寻址。寻址中（Seeking）指的是用户在音频/视频中移动/跳跃到新的位置。
volume 设置或返回音频/视频的音量
HTML5 Audio/Video 事件
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
timeupdate 当目前的播放位置已更改时。监听音频文件的播放(只要音频在播放，就会执行这个事件)
其中没有的是我认为没啥大用或者还没有遇到的方法，加粗的是我目前用过并会频繁用到的方法事件属性。
画布元素
canvas
个人认为h5中最重要的东西，可以做的东西太多了，这里只写一些常规用法，关于一些案例的实现会另开一个一篇文章写。
画布标签，可以理解为是在页面设置一块画布，然后可以在该区域设置绘制图形（通过JavaScript控制）
<canvas id="canvas">
如果浏览器不支持画布标签，那么请换一个浏览器查看效果！
</canvas>
一、简单绘制一条线：
步骤：
1.获取画布标签
2.设置画布尺寸
3.获取画笔（绘图的上下文对象）
4.设置画笔颜色
5.设置画笔粗细（宽度）
6.设置起点
7.设置下一个点
8.描线
代码实现：
又粘贴不了。。
二、绘制两条线
步骤：
1.获取画布标签
2.设置画布尺寸
3.获取画笔（绘图的上下文对象）
4.调用开始绘制方法（由画笔对象调用）
5.设置画笔颜色
6.设置画笔粗细（宽度）
7.设置起点
8.设置下一个点
9.描线
10.闭合路径（首位相连）
11.绘制另一条线（重复4-10）
代码：
var canvas = document.querySelector(".canvas")
// console.log(canvas);
canvas.width = 500
canvas.height = 200
// 获取画布内容
var pen = canvas.getContext("2d")
pen.beginPath();
// 设置笔触
pen.strokeStyle = "red";
// 设置线宽
pen.lineWidth = 5;
// 设置线的起点
pen.moveTo(0,0);
// 设置线的终点
pen.lineTo(100,0);
// 绘制线 绘制已定义的路线
pen.stroke();
// 绘制第二条线
pen.beginPath();
// 设置笔触
pen.strokeStyle = "green";
// 设置线宽
pen.lineWidth = 5;
// 设置线的起点
pen.moveTo(0,100);
// 设置线的终点
pen.lineTo(200,100);
// 绘制线 绘制已定义的路线
pen.stroke();
三、绘制三角形
// 开始绘制路径
pen.beginPath();
// 设置填充的颜色
pen.fillStyle="red";
// 设置线的颜色
pen.strokeStyle = "blue";
// 设置线的大小
pen.lineWidth = 5;
// 绘制起点
pen.moveTo(200,150);
// 绘制下一个点
pen.lineTo(400,300);
// 绘制下一个点
pen.lineTo(50,300);
// 绘制下一个点
pen.lineTo(200,150);
// 描边（给线上颜色的意思）
pen.stroke();
// 填充 （给图形上颜色）
pen.fill();
// 结束绘制路径
pen.closePath();
四、绘制矩形
var demo = document.querySelector("canvas")
demo.width = 500
demo.height = 500
var pen = demo.getContext("2d");
pen.beginPath();
pen.fillStyle = "red";
pen.rect(50,50,200,200);
// pen.fillRect();
pen.closePath();
pen.fill();
这个是我测试用的代码，其实可以用pen.fillRect()直接做一个出来哈
五、绘制弧形/圆形
pen.beginPath();
pen.lineWidth = 5;
pen.strokeStyle = "red";
// 计算弧度的公式 （记忆）
// 弧度 = 角度 * Math.PI / 180
// 30°C 对应的弧度是多少
// var rad = 90 * Math.PI / 180 ;
// 调用绘制弧形的方法
// pen.arc(x,y,r,s,e,boolean)
// pen.arc(x坐标,y坐标,半径，开始弧度，结束弧度，布尔值);
pen.arc(
200,
200,
100,
0 * Math.PI / 180,
90 * Math.PI / 180,
false
)
pen.stroke();
pen.closePath();
// 绘制扇形(圆形)
pen.beginPath();
pen.strokeStyle = "green";
pen.fillStyle="blue";
pen.lineWidth = 5;
pen.moveTo(200,200);
pen.arc(
200,
200,
80,
0 * Math.PI / 180,
180 * Math.PI / 180,
false
)
// pen.lineTo(200,200);
// 结束绘制路径（闭合路径）
pen.closePath();
pen.stroke();
pen.fill();
六、图片剪裁
img.onload = function(){
pen.drawImage(
img,
50,
150,
450,
300,
100,
100,
450 * (1 / 2),
300 * (1 / 2)
)
}
// 加载图片
// pen.drawImage(
// img, // 图片资源
// sx, // 图片上的x坐标位置（裁剪的x坐标）
// sy, // 图片上的y坐标位置（裁剪的y坐标）
// sw, // 在图片上的宽度（裁剪的宽度）
// sh, // 在图片上的高度（裁剪的高度）
// x, // 画布上的x坐标位置
// y, // 画布上的y坐标位置
// w, // 在画布上显示出来的宽度
// h // 在画布上显示出来的高度
// )
这里九个参数哈。。
七、执行动画（固定60帧）
var move = function(){
// 设置盒子的宽度
box.style.width = box.offsetWidth + 10 +"px";
// 满足这个条件执行
if(box.offsetWidth < 1000){
// 每1秒执行60次move函数
dd = window.requestAnimationFrame(move);
// console.log(dd);
}
}
// 事件绑定
// btn.onclick = function(){move()};
// 执行动画
btn1.onclick = move;
// 取消动画
btn2.onclick = function(){
// console.log('test');
// 取消执行动画
window.cancelAnimationFrame(dd);
}
八、绘制文本
pen.beginPath();
pen.strokeStyle = "#000";
pen.fillStyle = "green";
// 设置字体属性
// pen.font = "40px Wingdings";
pen.font = "40px 微软雅黑";
// 设置文本水平对齐 left right center
pen.textAlign = "center";
// 设置文本垂直对齐 top bottom middle
pen.textBaseline = "middle";
// console.log(pen);
// 文本描边
pen.strokeText(
"abc",
point.x,
point.y
)
// 文本填充
pen.fillText(
"abc",
point.x,
point.y
)
pen.closePath();
九、清除画布
// 擦除画布指定位置，指定尺寸的区域
ctx.clearRect(60,60,100,200);
十、总结
总之就是各类型的api，我这里为了清晰，用x-mind做了个框架哈，放图在下面
p.s.如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。如果子路径已经闭合了，这个方法不做任何事情。一旦子路径闭合，就不能再为其添加更多的直线或曲线了。
这里再补充一下，如果没有beginPath()方法，再下一次绘制中如果使用stroke()，那么会将两次绘制中的路径全部连接
