drawImage是一个非常有趣的方法,可以实现非常有趣的功能,常见的是画布上绘制图片。常见的应用场景就是图片编辑,比如头像的裁剪和缩放。
这里的Image不只是图片,而是图片源,可以作为图片源的有图片、video视频、另一个canvas对象等。。只不过图片使用的更多一点。
这个方法根据参数的个数有三种使用方式:
drawImage(image, x, y)
: 以(x, y)为起点绘制图片,最后的图片的区域大小为图片的实际尺寸。
drawImage(image, x, y, width, height)
: 以(x, y)为起点绘制图片,对图片进行缩放,最终的区域大小为width*height。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
: 这个方法的功能包含了上面两个方法,它可以看作是在原图片的(sx, sy)处作为起点,截取原图片sWidth*sHeight的内容,然后再将此内容绘制在以(dx, dy)为起点,大小为dWidth*dHeight的canvas区域内绘制。
推荐一个视频