关于多媒体和图形编程的介绍

十三、关于多媒体图形编程

1、图片

也就是img标签，在第一次访问的时候因为没有缓存文件，所以非常慢，所以为了提高用户体验，可以使用(new Image()).src = “”;提前将文件缓存好。

2、音频和视频

Audio标签和video标签

可以用src来指定数据源，使用<source>来指定不同的格式；

（1）属性：conntrols属性，如果设置了，将会显示一些列的播放控件，包括播放，暂停按钮和音量控制等等。

currentTime:设置开始播放的时间

initialTime：

Duration：

Volume：播放音量，介于0-1之间

Muted：设置为true为静音状态

playbackRate：指定媒体的播放速度，0-1是慢放，负值为回放，大于1表示快放

Loop:指定是否为循环播放

Preload：媒体播放前需要预加载的内容，none表示没有，auto自动加载适当的内容或者metadata表示需要加载的时长比特率等元数据不是媒体内容需要加载，默认 加载

autoPlay：表示当加载足够多的文件的时候是否要进行自动播放，当设置为true的时候也就告诉了浏览器需要预加载文件内容

只读属性：

Paused：检查媒体是否为暂停的

Seeking：true表示正在跳向下一个播放点

Ended：true表示媒体播放完成

Duration：属性制定了媒体的时长，单位是秒，若未加载完成返回NAN

initialTime：指定媒体的开始时间，单位是s，固定时长的媒体是0，对于流媒体表示的是可以退回的最早的时间

Played：返回已经播放的时间段

Buffered：当前已经缓冲的时间段

Seekable：返回当前播放器需要条到的时间段

readyState：指定当前加载了多少个媒体的内容，同时也暗示着是否可以转呗好可以播放了；

Have_nothing:0,表示没有加载任何内容

Have_metadata：1表示元数据加载完毕，媒体内容没有加载成功

Have_current_data：2，表示currentTime的媒体内容加载完毕，但是还是没有加载完成足够内容播放的媒体

Have_future_data：3，已经加载了一些媒体的内容，可以开始播放了

Have_enough_data :4加载完成所有的数据

NetworkState：指定媒体元素是否使用网络，或者为什么媒体文件不使用网络

Network_empty：0，媒体元素没有使用网络，没有设置src

Network_idle：1，媒体元素当前没有从网络中加载内容，可能是加载完成了，或者是preload设置成了none，还没有要求加载或者播放媒体。

Network_loading：2，媒体通过网络加载媒体内容

Network_No_source：3，媒体元素无法获取媒体源

Error：浏览器发生错误的时候，会创建一个error属性，没有错误的时候error为null，里面有一个code属性来表示错误代码

Media_err_aborted：1，用户要求浏览器停止加载媒体内容

Media_err_network：2，媒体类型正确，但是发生了网络错误当值无法加载

Media_err_decode：3，媒体文件正确，但是因为编码错误无法正常解码和播放

Media_err_src_not_supported:4，通过src指定的媒体文件浏览器不支持，无法播放。

（2）方法：

audio.canPlayType(“audio/wav”);：测试一个媒体元素能否播放指定类型的媒体文件，可以返回maybe或者probably，否则返回空字符串

Play()：播放

Pause()：暂停

（3）事件：

Loadstart：媒体元素开始请求的时候触发，networkstate对应的是Network_loading；

Progress：正在通过网络加载媒体内容，networkstate对应的是Network_loading

Loadedmetadata：媒体元数据加载完成，readyState对应的数值是Have_metadata

Loadeddata：当前播放的位置首次加载完毕，readyState对应的是have_current_time;

Canplay:已经加载了一部分内容，可以开始播放了，但是还需要继续缓冲，此时readystate数值是Have_future_data

Canplaythrough：所有媒体加载完毕，对应的readyState是have_enough_data；

Suspend：已经缓冲了大量的数据，可以暂停加载，networkstate是network_idle；

Stalled：尝试加载数据，但是无法获取到数据，此时networkstate始终为network_loading；

Play：调用play方法，或者设置了相应的autoplay属性没如果已经加载了足够多的数据，紧接着还是触发playing事件，否则紧接着触发waiting事件；

Waiting：由于为缓冲足够的数据导致播放未能开始或者停止播放，当缓冲足够的时候立即出发playing事件

Timeupdate：currentTime发生改变的时候，一般在播放的过程中每秒会触发4-60次，

Pause：调用了pause方法，暂停了播放

Seeking：通过脚本或者用户通过播放控件将当前的播放时间调至一个还没有缓冲的时间点，导致内容没有加载完成，停止播放，此时的seeking数值为true；

Seeked：seeking的数值变成false

Ended：媒体播放完毕停止播放

Durationchange：duration的数值发生变化

Volumechange：volume或者muted属性值发生改变

Ratechange：playbackrate或者defaultplaybackrate发生改变

Abort：用户要求停止加载内容，对应的error.code为media_err_aborted；

Error：由于发生网络错误或者其他的错误阻止媒体内容的加载，此时code的数值不会是media_err_aborted

Emptied：发生了错误或者终止，导致networkstate变成了network_empty

3、SVG可伸缩的矢量图形

Svg是一种用于描述图形的xml语法，在创建的时候要使用createElemetNS(svgs，””)；

Rect

Path

Text

4、<canvas>中的图形

Canvas元素自身是没有任何外观的，但是他在文档中创建了一个画板，提供了很多方法；

（1）方法

var canvas = document.getElementById(“”);

var c = canvas.getContext(“2d”);

c.beginPath()开始一条新的路径

c.moveTo(x,y);将起始点定义到一个点

c.lineTo(x,y);画一条线

C.closepath()；闭合一个图形

下面两个函数有两个特点，第一个是这两个方法都是作用在当前路径下所有的子路径，第二个是两种方法都不能更改当前路径，完成一条路径之后必须调用beginstart方法，如果没有的话，线段依然是添加到已有路径上，有可能会重复绘制一些路径。

C.fill();根据fillstyle填充一个图形

C.stroke()；根据strokeStyle的属性勾勒一个图形；

Save()：将当前图形状态压入用于已经保存状态的栈上

Restore()：从栈中弹出并且恢复最近一次保存的状态

fillText():通过fillStyle属性来用指定的颜色绘制文本；

strokeText()：第一个参数是要绘制的文本，第二、三个参数是文本绘制位置的坐标

measureText()：返回一个textmetrics对象，指定在使用当前字体绘制文本的时候的尺寸，其metric属性就是width。

Clip()：裁剪一个区域，根据上面规定的线段，该方法只能缩小裁剪区域，不会放大裁剪区域

getImageData()：返回一个ImageData对象，该对象是没有经过处理的像素信息，默认坐标系

createImageData()：方法可以创建一个空的ImageData对象

putImageData()：将像素复制回画布中，指定的位置是按照默认的坐标系的，忽略所有的图形属性，不会进行任何操作，不会合成

绘制和填充曲线：

arc(x,y,r,rad,director):x,y为圆心，r为半径，rad弧形的起始和结束的角度；director是顺时针和逆时针的方向，默认为false，顺时针。

arcTo(x1,y1,x2,y2,r);x1，y1为p1点的坐标，x2，y2为p2的坐标，r为圆角的半径；用来画矩形的圆角；

bezierCurveTo(x1,y1,x2,y2,x3,y3);三次贝塞尔曲线，p1和p2是两个控制点，p3为结束的点。

quadraticCurveTo(x1,y1,x2,y2);二次贝塞尔曲线，p1为控制点，p2为结束点；

矩形：

fillRext(x,y,width,height);x，y为点p的坐标，b为左上角的顶点，width和heigth为矩形的宽高。

strokeRect(x,y,width,height);勾勒矩形外框

clearRect(x,y,width,height);擦除矩形

isPointInPath();确定这个点是不是落在当前的路径上，点事默认的坐标系，并不是当前的坐标系；

以上三个方法都不影响当前路径以及路径中的当前点。

rect(x,y,width,height);此方法不会勾勒和填充，直接添加到当前路径的子路径中，和其他定义路径的方法一样。

（2）图形的属性

Fillstyle：

Font:绘制文本时候采用的字体，属性值是CSS的font的属性是一致的。”48bt sans-serif” “bold 18px Time Roman”

globalAlpha:绘制像素的时候要添加透明度，可以将所有绘制的东西都变成半透明的。

globalCompositeOperation:如何合并新的像素点和下面的像素点

lineCap：如何渲染线段的末端;

butt:表示线段端点直接结束

Square：表示在线段端点的基础上再继续延长线段宽度一半的长度

Round：在端点的基础上延长一个半圆，半圆的半径是线段宽度的一半

lineJoin:如何渲染顶点

Miter:表示一直延伸到两条路径的外侧边缘一直到某一点汇合，而miterLimit属性会限制延伸的长度，这个是默认值

Round：将顶点变得圆润

Bevel：用一条直线将汇合的顶点切除

lineWidth：线框线的宽度，默认值为1，小于1个像素宽的线段会绘制成半透明色的，

miterLimit：紧急斜顶点的最大长度，当linejoin为miter的时候才会有效

textAlign：文本的水平对齐方式，参照X轴坐标

Start：

Left：

Center：

Right：

End：

textBaseline：文本垂直对齐方式，参照Y轴坐标

Top

Hanging：用于梵文或者类似的文字

Middle：

Alphabetic：默认值，拉丁语和其他类似语言系列的字母

Ideographic：中文或者日文

Bottom：

shadowBlur：阴影的清晰或者模糊程度，默认值为0，表示产生一个清晰明亮的阴影，属性值越大表示阴影越模糊

shadowColor：下拉阴影的颜色，默认值是完全透明的黑色，只能设置为表示颜色的字符串；

shadowOffsetX：阴影的水平偏移量

shadowOffsetY：阴影的垂直偏移量

strokeStyle：勾勒线段的颜色

globalCompositeOperation：指定合成方式

Souce-over：表示源像素会绘制到目标像素上，这样是默认值，对于半透明的源像素就直接合并

Copy：表示合成关闭，源像素将原封不动的赋值到画布上，直接忽略目标像素。

Destination-over：表示将新的源像素绘制到已有的像素下面

（3）canvas元素

Canvas中的width和height是画布的宽度和高度，style中的width和height只会方法图形，不会扩大画布

（4）坐标系变换

C.translate(dx，dy):

X = x+dx；Y=y+dy；

C.scale(sx,sy);

X = x * sx; Y = y * sy;

C.rotate(a);

X = x*cos(a) - y*sin(a); Y = y*cos(a) + x*sin(a);

C.transform(a,b,c,d,e,f);c.setTransform(a,b,c,d,e,f);

X = ax + cy + e;Y = bx + dy + f;前者是根据当前坐标系变换的，后者是根据默认坐标系变换的。

（5）颜色、透明度、渐变以及图案

strokeStyle和fillStyle属性制定了线条勾勒的样式和区域填充的样式，指定不透明或者半透明的颜色，也可以设置成为CanvasPattern或者CanvasGradient对象

颜色:

Var colors = [“#ff4”,”#44f44f”,”rgb(60,60,60)”,”rgb(100%,60%,60%)”,

”rgba(100%,25%,100%,0.5)”,”transparent”,”hsl(60,100%,100%)”,”hsla()”];

Hsl:分别为色调，饱和度和亮度，色调：0是红色，60是黄色，120是绿色，180是靛色，240蓝色。300品红色，360返回红色。饱和度为0的颜色是暗灰色，任何亮度为0的颜色都为纯黑色；

CanvasPattern对象

createPattern(image,”repeat”);第一个参数是做图案的图片，可以使image，也可以是一个canvas；第二个参数是填充的方法，repeat,采用重复的图片填充，repeat-x和repeat-y以及no-repeat；

渐变图案的CanvasGradient对象

createLinearGradient(0,0,canvas.wifth,canvas.height);这个一条渐变颜色的对角线。他的参数是一定一条线段两个点的坐标，这个线段上每个点的颜色都是不同的;

createRadialGradient(x1,y1,r1,x2,y2,r2);这个方法需要的参数是两个圆，这两个圆形不一定是同心圆，第二个比第一个大；

他们渐变的颜色是通过addColorStop(0.0,,”#88f”)方法来定义渐变色。第一个参数是0.0到1.0之间的数字，第二个参数是css的颜色值。

图片：

drawImage():用于将原图片（或者原图片的矩形区域中）的像素内容复制到画布上。

3个参数：原图片、待绘制的图片的左上角的X轴和Y轴坐标，这样的方式原图片的所有的内容都会复制到画布上面

5个参数：另外两个参数是宽度和高度，这四个参数定义了一个目标矩形局域，而即使不指定缩放变换原图片也会自动伸缩适应目标矩形 区域

9个参数：指定目标矩形区域，2-5个参数指定了源矩形区域，默认坐标系6-9个参数制定了图片要绘制在的目标矩形区域，该区域是在画布当前的坐标系，而不是默认的坐标系中绘制的。

toDataURL()：将画布中内容抽取一张图片，这个方法不会传递任何参数，用canvas对象调用，会将该对象以PNG图片的形式返回