JavaScript学习笔记整理（15）：多媒体、Canvas和SVG(4)_H5之家

参数：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>

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

<body>

</svg>

</body>

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