canvas使用drawImage()方法绘制img和video的区别

drawImage()简介

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

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

具体参数

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

具体用法

drawImage()用法一共有三种：

（1）在画布上定位图像：

context.drawImage(img,x,y);

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

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

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

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

具体区别

（1）在第一种传入三个值指定位置的方法上，第一个值是img对象和是video对象，没有什么区别。

（2）在第二种规定图像的宽度和高度的方法上。如果绘制的是img对象的话，后面的四个值是指定绘制的图片的哪一块区域。如果绘制的是video对象话，后面四个值是指定从canvas对象的哪里绘制到哪里。

（3）第三种方法如果绘制的是img对象，则完全按照具体参数的规则来的。而如果绘制的video对象，从第二个值到第五个值，这是规定的绘制video对象的每一帧的实际尺寸的开始位置到结束位置，后四项则是在canvas上面绘制的开始位置到结束位置。

总结

如果绘制的是img对象话，直接按照参数来书写就可以了。如果是video对象的话，还是多注意以下，五个参数的情况下和九个参数的情况下，后四位参数的作用都是一样的。而在九个参数情况下，二到五的参数是按照视频的实际尺寸来设置的，所以这比较坑一些。