HTML5 canvas drawImage() 方法记录

浏览器支持

Internet Explorer 9、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标识的参数）。

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

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