H5图形、音频、视频常用知识总结

H5图形、音频、视频常用知识总结

1、canvas绘制步骤

1.1、根据id属性或其他选择器选中canvas元素对象：

<canvas id="myCanvas" width="400" height="400">
    您的浏览器不支持此功能
</canvas>
var canvas=document.getElementById("myCanvas");

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、绘制图像

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)
}

2.7、绘制文本

context.font    //文本样式、大小、字体，默认值为normal
context.textAlign    //文本对齐方式
context.fillText(textString,startX,startY);    //填充文本（实心字）
context.strokeText(text,startX,startY);    //文本描边（空心字）
var m=context.measureText(textString)    //测量文本尺寸，返回一个尺度对象
var width=m.width;

3、图形变换

context.translate(x,y)    //平移
context.rotate(deg)    //旋转(定位为弧度)
context.scale(x-ratio,y-ratio)    //缩放
context.save()    //保存状态
context.restore()    //恢复距离最近的状态，一个状态只能恢复一次

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可以很轻松地播放视频和音频

<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>

常用方法：
　　play() 开始播放音频/视频
　　pause() 暂停当前播放的音频/视频
常用属性：
　　src 设置或返回音频/视频元素的当前来源
　　autoplay 设置或返回是否在加载完成后随即播放音频/视频
　　controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
　　loop 设置或返回音频/视频是否应在结束时重新播放
　　paused 设置或返回音频/视频是否暂停
　　volume 设置或返回音频/视频的音量
　　defaultPlaybackRate 设置或返回音频/视频的默认播放速度
　　playbackRate 设置或返回音频/视频播放的速度
　　defaultMuted 设置或返回音频/视频默认是否静音
　　muted 设置或返回音频/视频是否静音
　　duration 返回当前音频/视频的长度（以秒计）
　　ended 返回音频/视频的播放是否已结束

　　poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像

注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放，

因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择