HTML5 canvas drawImage() 方法

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

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

JavaScript 语法 1

在画布上定位图像：

context.drawImage(img,x,y);

JavaScript 语法 2

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

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

JavaScript 语法 3

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

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);  //从原图指定坐标（sx,sy）处，剪切指定大小（swidth,sheight）的图片，以指定大小（width,height）画在指定画布（context）的指定坐标（x,y）上面

参数值

参数描述img规定要使用的图像、画布或视频。sx可选。开始剪切的 x 坐标位置。sy可选。开始剪切的 y 坐标位置。swidth可选。被剪切图像的宽度。sheight可选。被剪切图像的高度。x在画布上放置图像的 x 坐标位置。y在画布上放置图像的 y 坐标位置。width可选。要使用的图像的宽度。（伸展或缩小图像）height可选。要使用的图像的高度。（伸展或缩小图像）