HTML5 canvas drawImage() 方法记录

浏览器支持

Internet Explorer 九、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。
注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也可以绘制图像的某些部分，以及/或者增长或减小图像的尺寸。

JavaScript 语法 1

在画布上定位图像：

context.drawImage(img,sx,sy);

此时其余的默认值为：
swidth：画布宽度
sheight：width/swidth*height
x：0
y：0
width：图像的naturalWidth
height：图像的naturalHeight

JavaScript 语法 2

在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,sx,sy,swidth,sheight);

此时其余的默认值为：
x：0
y：0
width：图像的naturalWidth
height：图像的naturalHeight

JavaScript 语法 3

剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

---

参数值

img：规定要使用的图像、画布或视频。
sx：可选。画布中被绘制的区域的左上角的点的 x 值。
sy：可选。同上的 y 值。
swidth：可选。画布中被绘制的区域的宽度。
sheight：可选。同上的高度。
x：图像中，被选取的区域的左上角的点的 x 值。
y：同上的 y 值。
width：可选。图像中，被截取的区域的宽度。
height：可选。同上的高度。

参数使用原理：参数分为3部分，一部分描述图像数据源，一部分描述从数据源中截取的区域（参数前无s标识的参数），一部分描述在画板中绘制的区域（参数前有s标识的参数）。

简单来说，此方法将从图像中截取一个矩形区域来画到画板中的一个矩形区域，若是两个矩形区域的数值不同，将对图像进行缩放，甚至拉伸。

延伸使用方法：若是设置的画板区域比画板自己要大的时候，依然会按照上面的方式，把图像延伸到画板外，可是，在画板外的图像是不会绘制出来的。