HTML5 canvas drawImage() 方法记录

浏览器支持

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

定义和用法

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

在画布上定位图像：

@H_618_20@context.drawImage(img,sx,sy);

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

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

@H_618_20@context.drawImage(img,sy,swidth,sheight);

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

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

@H_618_20@context.drawImage(img,sheight,x,y,width,height);

参数值

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