H5图形、音频、视频常用知识总结
1、canvas绘制步骤
1.1、根据id属性或其他选择器选中canvas元素对象：
<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);"><canvas id="myCanvas" width="400" height="400"> 您的浏览器不支持此功能 </canvas> var canvas=document.getElementById("myCanvas");</pre>
1.2、调用getContext方法获取上下文，创建Context对象，以获取绘制环境：
var context=canvas.getContext("2d");
1.3、绘制图形
2、绘制图形
2.1、绘制路径型图形：
context.beginPath() //新路径开始
context.moveTo(startX,startY) //画笔移动到起点
context.lineTo(endX,endY) //直线要到达的终点
context.arcTo(controlX,controlY,endX,endY,radius) //绘制两条切线之间的弧/曲线路径
context.quadraticCurveTo(controlX,controlY,endX,endY) //绘制二次贝塞尔曲线路径
context.bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY) //绘制三次贝塞尔曲线路径
context.rect(startX,startY,width,height) //绘制矩形
context.arc(centerX,centerY,radius,startDeg,endDeg,dir) //绘制圆弧
参数说明：圆心坐标，半径，起始弧度，终止弧度，方向，0度在圆心正右边，方向默认为false，顺时针方向
context.arc(centerX,centerY,radius,0,2*Math.PI,flase) //绘制圆
context.lineCap //线条端点样式，三个可选值：butt/round/square
context.lineJoin //线条连接样式，三个可选值：miter/round/bevel
context.lineWidth //线条宽度属性
context.strokeStyle //线条颜色属性
context.stroke() //上色，默认为黑色
2.2、颜色填充
context.fillStyle //填充色属性
context.fill() //填充颜色，默认填充颜色为黑色
context.fillRect(startX,startY,width,height); //绘制填充式矩形
2.3、绘制阴影
context.shadowColor //阴影颜色
context.shadowBlur //阴影模糊度
context.shadowOffsetX //阴影水平距离
context.shadowOffsetY //阴影垂直距离
2.3、透明度：context.globalAlpha //取值0~1
2.4、渐变
var clg=context.createLinearGradient(startX,startY,endX,endY); //设置线性渐变轴向
var crg=context.createRadialGradient(X1,Y1,R1,X2,Y2,R2); //设置径向渐变同心圆
clg.addColorStop(position(0~1),color) //设置渐变轴各点的颜色，一般会设置2个或2个以上的点
crg.addColorStop(position(0~1),color) //设置渐变直径各点的颜色，一般会设置2个或2个以上的点
context.fillStyle=clg; //将渐变色用于填充色
context.fillStyle=crg; //将渐变色用于填充色
context.StrokeStyle=clg; //将渐变色用于线条颜色
2.5、图案填充
var pat=contextcreatePattern(imgDomObj,repeatType)
context.fillStyle=pat; //将图案设置为填充样式
2.6、绘制图像
<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">var imageObj=new Image();
imageObj.src=urlString;
imageObj.onload=function(){
context.drawImage(imageObj,startX,startY[,width,height])
context.drawImage(imageObj,cutStartX,cutStartY,cutWidth,cutHeight,drawStartX,drawStartY,drawWidth,drawHeight)
}</pre>
2.7、绘制文本
<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">context.font //文本样式、大小、字体，默认值为normal
context.textAlign //文本对齐方式
context.fillText(textString,startX,startY); //填充文本（实心字）
context.strokeText(text,startX,startY); //文本描边（空心字）
var m=context.measureText(textString) //测量文本尺寸，返回一个尺度对象
var width=m.width;</pre>
3、图形变换
<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">context.translate(x,y) //平移
context.rotate(deg) //旋转(定位为弧度)
context.scale(x-ratio,y-ratio) //缩放
context.save() //保存状态
context.restore() //恢复距离最近的状态，一个状态只能恢复一次</pre>
4、图形组合
context.globalCompositeOperation //图形组合方式
当多个图形重叠时，默认为后来者居上
5、画布裁切
一旦裁切了画布中的某个区域，则画布的其他区域所绘制的图形都不可见
context.clip() //裁切距离最近闭合图形
6、清空区域
context.clearRect(startX,startY,width,height); //清空矩形区域
7、音频和视频
h5之前，可以通过flash来插入视频，但它有一些弊端: 1.先学习flash,增加使用成本 2.iphone,ipd,不支持flash
h5也可以利用embed标签插入视频:可以直接插入音频视频，本质是通过本机安装的音频视频播放软件来播放的。要求必须已经安装了这些软件 兼容性不好
使用h5可以很轻松地播放视频和音频
<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);"><audio controls autoplay>
<source src="text.ogg" type="audio/ogg"></source>
<source src="text.mp3" type="audio/mpeg"></source> 您的浏览器不支持此功能 </audio>
<video controls loop muted>
<source src="text.ogg" type="video/ogg"></source>
<source src="text.mp4" type="audio/mp4"></source> 您的浏览器不支持此功能 </video></pre>
常用方法：
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
常用属性：
src 设置或返回音频/视频元素的当前来源
autoplay 设置或返回是否在加载完成后随即播放音频/视频
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
loop 设置或返回音频/视频是否应在结束时重新播放
paused 设置或返回音频/视频是否暂停
volume 设置或返回音频/视频的音量
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
playbackRate 设置或返回音频/视频播放的速度
defaultMuted 设置或返回音频/视频默认是否静音
muted 设置或返回音频/视频是否静音
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像
<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放，</pre>
<pre style="box-sizing: border-box; outline: 0px; margin: 0px 0px 24px; padding: 8px; position: relative; font-family: Consolas, Inconsolata, Courier, monospace; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-size: 14px; line-height: 22px; color: rgb(0, 0, 0);">因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择</pre>
