浏览器支撑

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标识的参数）。

简朴来说，此要领将从图象中截取一个矩形地区来画到画板中的一个矩形地区，假如两个矩形地区的数值不一样，将对图象举行缩放，以至拉伸。

延长运用要领：假如设置的画板地区比画板自身要大的时刻，依旧会根据上面的体式格局，把图象延长到画板外，然则，在画板外的图象是不会绘制出来的。