JavaScript学习笔记整理（15）：多媒体、Canvas和SVG

由于不同的浏览器对标准音频和视频的编解码支持上并不一致，所以通常需要使用<source>元素来为指定不同格式的媒体源：

<audio id="music">
  <source src="m.mp3" type="audio/mpeg">
  <source src="m.ogg" type="audio/ogg;codec='vorbis'">
</audio>

<source>元素没有任何内容：没有闭合的</source>标签，也需要使用“/>”来结束它们。

我们可以在<audio>和</audio>（或<video>和</video>）标签之间插入文本内容，如果浏览器支持<audio>和<video>元素，将不会渲染文本内容；而如果浏览器不支持时，则会将它们渲染出来。

<audio id="music">   
  <source src="m.mp3" type="audio/mpeg">   
  <source src="m.ogg" type="audio/ogg;codec='vorbis'">  
  您的浏览器不支持audio标签。
</audio>

1.1 HTML中媒体的属性

（1）视频（<video>）

autoplay    autoplay    如果出现该属性，则视频在就绪后马上播放。
controls    controls    如果出现该属性，则向用户显示控件，比如播放按钮。
height      pixels      设置视频播放器的高度。
width       pixels      设置视频播放器的宽度。
loop        loop        如果出现该属性，则循环播放。
muted       muted       如果出现该属性，视频的音频输出为静音。
poster      URL         规定视频正在下载时显示的图像，直到用户点击播放按钮。 preload     auto/metadata/none   如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src         URL         要播放的视频的 URL。

（2）音频（<audio>）

autoplay    autoplay    如果出现该属性，则视频在就绪后马上播放。
controls    controls    如果出现该属性，则向用户显示控件，比如播放按钮。
loop        loop        如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted       muted       如果出现该属性，视频的音频输出为静音。
preload     auto/metadata/none    如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src         URL         要播放的视频的 URL。

1.2 用JavaScript操作音频和视频

audio可以通过new创建Audio对象

var music = new Audio('m.mp3');

还可以通过标签获取<audio>或<video>元素，即获得HTMLVideoElement和HTMLAudioElement对象：

var music = document.getElementById('music');

检测浏览器是否支持

var hasAudio = !!(music.canPlayType); //通过!!运算符将结果转换成布尔值

（1）属性

只读属性：

duration   整个媒体文件的播放时长，以秒为单位。如果无法获取时长，则返回NaN  
paused     如果媒体文件当前被暂停，则返回true。如果还未开始播放，默认返回true  
ended      如果媒体文件已经播放完毕，则返回true  
startTime  返回最早的播放起始时间，一般是0.0，除非是缓冲过的媒体文件，并且一部分内容已经不在缓冲区  
error      在发生了错误的情况下返回的错误代码  
currentSrc 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件
seeking    如果播放器正在跳到一个新的播放点，那seeking的值为true。
initialTime  指定了媒体的开始时间，单位为秒

可读写属性：

autoplay     将媒体文件设置为创建后自动播放，或者查询是否已设置为autoplay  
loop         返回是否循环播放，或设置循环播放（或者不循环播放）  
currentTime  指定了播放器应该跳过播放的时间（单位为秒）。在播放过程中，可设置currentTime属性来进行定点播放。
controls     显示或隐藏用户控制界面，或者查询用户控制界面当前是否可见  
volume       在0.0到1.0之间设置音频音量的相对值，或者查询当前音量相对值  
muted        布尔值，设置静音或者消除静音，或者检测当前是否为静音  
autobuffer   通知播放器在媒体文件开始播放前，是否惊醒缓冲加载。如果已设置为autoplay，则忽略此特性
playbackRate  用于指定媒体播放的速度。1.0表示正常速度，大于1则表示“快进”，0~1之间表示“慢放”，负值表示回放。

三个特殊属性：

played 返回已经播放的时间段  
buffered 返回当前已经缓冲的时间段  
seekable 返回当前播放器需要跳到的时间段

played、buffered和seekable都是TimeRanges对象，每个对象都有一个length属性以及start(index)和end(index)方法，前者表示当前一个时间段，后者分别返回当前时间段的起始时间点和结束时间点（单位为秒）。

还有另外三个属性：

readyState、networkState和error，它们包含<audio>和<video>元素的一些状态细节。每个属性都是数字类型的，而且为每个有效值都定义了对应的常量。

readyState属性指定当前已经加载了多少媒体内容，只读属性

HAVE_NOTHING（数字值为0）：没有获取到媒体的任何信息，当前播放位置没有可播放数据。  
HAVE_METADATA（数字值为1）：已经获取到足够的媒体数据，但是当前播放位置没有有效的媒体数据（也就是说，获取到的媒体数据无效，不能播放）。  
HAVE_CURRENT_DATA（数字值为2）：当前播放位置已经有数据可以播放，但没有获致到可以让播放器前进的数据。当媒体为视频时，意思是当前帖的数据已获取，但没有获取到下一帧的数据，或者当前帧已经是播放的最重一帧。  
HAVE_FUTURE_DATA（数字值为3）：当前播放位置已经有数据可以播放，而且也获取到了可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获取，而且也获取到了下刺目贩数据，当前帧是播放的最后一帧时，readyState属性不可能为HAVE_FUTURE_DTAT。  HAVE_ENOUGH)DATA（数字值为4）：当前播放位置已经有数据可以播放，同时也获取到了可以让播放器前进的数据，而且浏览器确认媒体以某一种速度进行加载，可以保证有足够的后续数据进行播放。

networkState属性

networkState属性读取当前的网络状态，共有如下所示的4个可能值：

NETWORK_EMPTY（数字值为0）：元素牌初始状态。  
NETWORK_IDLE（数字值为1）：浏览器已选择好用什么编码格式来播放媒体，但尚未建立网络连接。  
NETWORK_LOADING（数字值为2）：媒体数据加载中。  
NETWORK_NO_SOURCE（数字值为3）：没有支持的编码格式，不执行加载。

error属性

当在加载媒体或者播放媒体过程中发生错误时，浏览器就会设置<audio>或<video>元素的error属性。在没有错误发生时，error属性值为null。反之，error的属性是一个对象，包含了描述错误的数值code属性，error.code可能的值：

MEDIA_ERR_ABORTED(数字值为1）：媒体数据的下载过程由于用户的操作原因而被中止。  
MEDIA_ERR_NETWORK(数字值为2）：确认媒体资源可用，但是在下载时出现网络错误，媒体数据下载过程被中止。  
MEDIA_ERR_DECODE(数字值为3)：确认媒体资源可能，但是解码时发生错误。  
MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：媒体格式不被支持。

video的额外属性：

poster	在视频加载完成之前，代表视频内容的图片的URL地址。该特性可读可修改  
width、height	读取或设置显示尺寸。如果大小不匹配视频本身，会导致边缘出现黑色条状区域  
videoWidth、videoHeight	返回视频的固有或自使用宽度和高度。只读

（2）方法

canPlayType(type)方法将媒体的MIME类型作为参数，用来测试浏览器是否支持指定的媒体类型。如果它不能播放该类型的媒体文件，将返回一个空的字符串；反之，它会返回一个字符串：“maybe”或“probably”。

var a = new Audio();
if(a.canPlayType('audio/wav')){
  a.src = 'm.wav';
  a.play();
}

其他方法：

play()   控制媒体开始播放
pause()  暂停媒体播放
load()   重新加载src指定的资源

（3）事件

audio元素和video元素加载音频和视频时，以下事件按次序发生。

loadstart：开始加载音频和视频。  
durationchange：音频和视频的duration属性（时长）发生变化时触发，即已经知道媒体文件的长度。如果没有指定音频和视频文件，duration属性等于NaN。如果播放流媒体文件，没有明确的结束时间，duration属性等于Inf（Infinity）。  
loadedmetadata：媒体文件的元数据加载完毕时触发，元数据包括duration（时长）、dimensions（大小，视频独有）和文字轨。  
loadeddata：媒体文件的第一帧加载完毕时触发，此时整个文件还没有加载完。  
progress：浏览器正在下载媒体文件，周期性触发。下载信息保存在元素的buffered属性中。  
canplay：浏览器准备好播放，即使只有几帧，readyState属性变为CAN_PLAY。  
canplaythrough：浏览器认为可以不缓冲（buffering）播放时触发，即当前下载速度保持不低于播放速度，readyState属性变为CAN_PLAY_THROUGH。

除了上面这些事件，audio元素和video元素还支持以下事件。

abort	播放中断  
emptied	媒体文件加载后又被清空，比如加载后又调用load方法重新加载。  
ended	播放结束  
error	发生错误。该元素的error属性包含更多信息。  
pause	播放暂停  
play	暂停后重新开始播放  
playing	开始播放，包括第一次播放、暂停后播放、结束后重新播放。  
ratechange	播放速率改变  
seeked	搜索操作结束  
seeking	搜索操作开始  
stalled	浏览器开始尝试读取媒体文件，但是没有如预期那样获取数据  
suspend	加载文件停止，有可能是播放结束，也有可能是其他原因的暂停  
timeupdate	网页元素的currentTime属性改变时触发。  
volumechange	音量改变时触发（包括静音）。  
waiting	由于另一个操作（比如搜索）还没有结束，导致当前操作（比如播放）不得不等待。

二、canvas

HTML5<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

要使用Canvas API，首先需要新建一个<canvas>网页元素

<canvas id="canvas" width="400" height="200">
  您的浏览器不支持canvas！
</canvas>

width 和 height 属性定义的画布的大小。

接着，我们可以通过标签选择获取到<canvas>元素：

var canvas = document.getElementById('canvas');

然后，创建context对象：

if(canvas.getContext){
  var ctx = canvas.getContext('2d');
}

调用getContext()方法时，传递一个“2d”参数，会获得一个CanvasRenderingContext2D对象，使用该对象可以在画布上绘制二维图形。我们也可将CanvasRenderingContext2D简称为“上下文对象”。

2.1 canvas的绘图用法

canvas画布提供了一个用来作图的平面空间，该空间的每个点都有自己的坐标，x表示横坐标，y表示竖坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。

（1）绘制矩形

rect(x,y,width,height)方法用来绘制矩形。

fillRect(x, y, width, height)方法用来绘制矩形，它的四个参数分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。fillStyle属性用来设置矩形的填充色。

strokeRect(x, y, width, height)方法同样是绘制矩形，但只画线不填充，也可以说是画空心矩形。strokeStyle属性用来设置矩形的绘制色。

clearRect(x, y, width, height)方法用来清除某个矩形区域的内容。

（2）绘制圆形和扇形

arc(x, y, radius, startAngle, endAngle, anticlockwise)方法用来绘制圆形和扇形。

arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。

arcTo(x1,y1,x2,y2,r)方法在画布上创建介于两个切线之间的弧/曲线。

参数：x1 弧的起点的 x 坐标，y1 弧的起点的 y 坐标，x2 弧的终点的 x 坐标，y2 弧的终点的 y 坐标，r 弧的半径。

（3）绘制文本

fillText(string, x, y) 用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。

strokeText(string,x,y)方法，用来添加空心字。

// 设置字体  
ctx.font = "Bold 20px Arial";   
// 设置对齐方式，start、end、right、center
ctx.textAlign = "left";  
// 设置填充颜色  
ctx.fillStyle = "#008600"; 
//设置垂直对齐方式，top、hanging、middle、alphabetic、ideographic、bottom
ctx.textBaseline = top;

我们还可以计算字体宽度(px)：

var name = 'aaa';
ctx.measureText(name);

measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。

ctx.measureText(name).width

（4）绘制路径

beginPath()方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke()方法用来给透明的线段着色。

ctx.beginPath(); // 开始路径绘制  
ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20)  
ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线  
ctx.lineWidth = 1.0; // 设置线宽  
ctx.strokeStyle = '#CC0000'; // 设置线的颜色  
ctx.stroke(); // 进行线的着色，这时整条线才变得可见

moveTo()和lineTo()方法可以多次使用。

注意：如果使用closePath()方法，会自动绘制一条当前点到起点的直线，形成一个封闭图形。

fill()和stroke()分别填充当前绘图（路径）和绘制已定义的路径。

isPointInPath()

isPointInPath(x,y);

如果指定的点位于当前路径中，isPointInPath() 方法返回 true，否则返回 false。

clip()

clip()方法从原始画布中剪切任意形状和尺寸。

注意：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

closePath()方法创建当前点回到起始点的路径。

其他样式属性：

lineCap	设置或返回线条的结束端点样式，可能值： butt|round|square（平直边缘|圆形线帽|正方形线帽） 
lineJoin	设置或返回两条线相交时，所创建的拐角类型，可能值：bevel|round|miter（斜角|圆角|尖角（默认值））
lineWidth	设置或返回当前的线条宽度。  
miterLimit 正数，设置或返回最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

fillStyle  设置填充色
strokeStyle  设置绘制线色

颜色格式：

//可直接用颜色名称
'red' 'green'
//十六进制颜色
'#d9d9d9'
//rgb
rgb(0,0,0)
//rgba
rgba(0,0,0,1)

（5）设置渐变色

线性渐变

createLinearGradient方法用来设置渐变色。

var gradient = ctx.createLinearGradient(0, 0, 0, 160);    
gradient.addColorStop(0, "#BABABA");    
gradient.addColorStop(1, "#636363");

createLinearGradient()方法的参数是(x1, y1, x2, y2)，其中x1和y1是起点坐标，x2和y2是终点坐标。通过不同的坐标值，可以生成从上至下、从左到右的渐变等等。

使用方法：

ctx.fillStyle = myGradient;  
ctx.fillRect(10,10,200,100);

环形渐变

createRadialGradient()方法的参数是(x0,y0,r0,x1,y1,r1)，其中x0 渐变的开始圆的 x 坐标，y0 渐变的开始圆的 y 坐标，r0 开始圆的半径，x1 渐变的结束圆的 x 坐标，y1 渐变的结束圆的 y 坐标，r1 结束圆的半径。

var grd=ctx.createRadialGradient(75,50,5,90,60,100);  
grd.addColorStop(0,"red");  
grd.addColorStop(1,"white");   
  
ctx.fillStyle=grd;  
ctx.fillRect(10,10,150,100);

（6）设置阴影

我们还可以设置阴影

ctx.shadowOffsetX = 10; // 设置水平位移  
ctx.shadowOffsetY = 10; // 设置垂直位移  
ctx.shadowBlur = 5; // 设置模糊度  
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色   

ctx.fillStyle = "#CC0000";   
ctx.fillRect(10,10,200,100);

（7）合成

globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。

globalAlpha 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字。

ctx.globalAlpha = number

globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

source-over	默认。在目标图像上显示源图像。  
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。  
source-in	在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。  
source-out	在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。  
destination-over	在源图像上显示目标图像。  
destination-atop	在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。  
destination-in	在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。  
destination-out	在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。  
lighter	显示源图像 + 目标图像。  
copy	显示源图像。忽略目标图像。  
xor	使用异或操作对源图像与目标图像进行组合。

2.2 绘制图像

Canvas API 允许将图像文件插入画布。

我们可以使用Image对象来加载图片，然后绘制：

var image = new Image();
image.onload = function(){
    ctx.drawImage(image,0,0);
};
image.src='new.jpg';

drawImage方法

drawImage(img,x,y)

drawImage(img,x,y,width,height)

drawImage(img,sx,sy,switch,sheight,x,y,width,height)

参数：

img 规定要使用的图像、画布或视频；sx 可选，开始剪切的 x 坐标位置；sy 可选，开始剪切的 y 坐标位置；swidth 可选，被剪切图像的宽度；sheight 可选，被剪切图像的高度；x 表示在画布上放置图像的 x 坐标位置；y 在画布上放置图像的 y 坐标位置；width 可选，表示要使用的图像的宽度（伸展或缩小图像）；height 可选，表示要使用的图像的高度（伸展或缩小图像）。

图像平铺

createPattern(image,type)

参数：

 type: no-repeat:不平铺 ；repeat-x:横方向平铺；repeat-y:纵方向平铺；repeat:全方向平铺

2.3 像素处理

通过getImageData方法和putImageData方法，可以处理每个像素，进而操作图像内容。

getImageData()方法可以用来读取Canvas的内容，返回一个对象，包含了每个像素的信息。

var imageData = ctx.getImageData(x,y,w,h)

参数：x是canvas的X轴坐标，y是canvas的Y轴坐标，w是宽度，h是高度。

getImageData()方法返回一个像素颜色数组（该数组的长度等于图像的像素宽度*图像的像素高度*4，每个值的范围是0-255，可读写），imageData的属性data就是指向它，顺序是所取像素范围的从左到右，从上到下，数组的元素是（所有图形，包括图片，和绘制的图形）每个像素的rgba  :

[r1,g1,b1,a1,r2,g2,b2,a2...]

putImageData()方法可将数组内容重新绘制到Canvas上。

putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

参数：imgData 规定要放回画布的 ImageData 对象；x 是ImageData 对象左上角的 x 坐标，以像素计；y 是ImageData 对象左上角的 y 坐标，以像素计；dirtyX 可选，水平值（x），以像素计，在画布上放置图像的位置；dirtyY 可选，垂直值（y），以像素计，在画布上放置图像的位置；dirtyWidth 可选，在画布上绘制图像所使用的宽度；dirtyHeight 可选，在画布上绘制图像所使用的高度。

当然，我们也可以创建一个空白的ImageData对象。

var imgData=context.createImageData(width,height);

也可创建与指定的另一个ImageData对象尺寸相同的新ImageData对象（其不会复制图像数据）：

var imgData=context.createImageData(imageData);

ImageData对象有data属性，它包含 color/alpha 信息的数组。

2.4 保存与恢复

save()方法用于保存上下文环境，restore()方法用于恢复到上一次保存的上下文环境。

2.5 保存图像

我们可以使用toDataURL()方法将Canvas数据重新转化成图像文件形式：

canvas.toDataURL('image/png')

上面的代码将Canvas数据，转化成PNG data URI。

2.6 转换

（1）scale()

scale() 方法缩放当前绘图至更大或更小。

scale(scalewidth,scaleheight)

参数：scalewidth 缩放当前绘图的宽度；scaleheight 缩放当前绘图的高度。

注意：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

（2）rotate()

rotate() 方法旋转当前的绘图。

rotate(angle)

参数：angle 旋转角度，以弧度计。

注意：旋转只会影响到旋转完成后的绘图。

（3）translate()

translate() 方法重新映射画布上的 (0,0) 位置。

translate(x,y)

参数：x 添加到水平坐标（x）上的值；y 添加到垂直坐标（y）上的值。

（4）transform()

transform(a,b,c,d,e,f)

参数：a 水平缩放绘图，b 水平倾斜绘图，c 垂直倾斜绘图，d 垂直缩放绘图，e 水平移动绘图，f 垂直移动绘图。

（5）setTransform()

setTransform() 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

setTransform(a,b,c,d,e,f)

参数：a 水平缩放绘图，b 水平倾斜绘图，c 垂直倾斜绘图，d 垂直缩放绘图，e 水平移动绘图，f 垂直移动绘图。

注意：该变换只会影响 setTransform() 方法调用之后的绘图。

2.7 动画

我们可以使用setInterval()和setTimeout()来产生动画效果。

还可以使用requestAnimationFrame()来制作动画。

requestAnimationFrame()函数是全局函数。

考虑兼容，如下：

var requestAnimFrame = function() {   
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(a) {window.setTimeout(a, 1e3 / 60, (new Date).getTime())};   
}();

使用方法：

function step(){
  requestAnimationFrame(step);
}

requestAnimationFrame()方法会返回一个requestID，是一个长整型非零值，作为一个唯一的标识符，可将该值作为参数传递给window.cancelAnimationFrame()来取消这个函数。

cancelAnimationFrame(requestID);

兼容性代码：

var cancelAnimFrame = function() {   
  return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function(id) { clearTimeout(id); }; 
}();

三、SVG：可伸缩的矢量图形

SVG是一种用于描述图形的XML语法。由于结构是XML格式，使得它可以插入HTML文档，成为DOM的一部分，然后用JavaScript和CSS进行操作。

一个简单的SVG文件如下：

<svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">
  <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>
</svg>

要使用SVG有很多方法，最简单的就是直接将SVG代码嵌入到HTML中：

<body>
  <svg xmlns="http://www.w3.org/2000/svg" vieBox="0 0 1000 1000" id="mySvg">     <rect x="100" y="200" width="800" height="600" stroke="black" stroke-width="25" fill="red"/>   
  </svg>
</body>

SVG代码也可以单独写在一个文件中，后缀是“.svg”，然后用在<img>、<object>、<embed>、<iframe>等标签，以及CSS的background-image属性，将这个文件插入网页。

<img src="example.svg">

<object data="example.svg" type="image/svg+xml"></object>

<embed src="example.svg" type="image/svg+xml">

<iframe src="example.svg"></iframe>