Codog

关注微信公众号:Codog代码狗

0%

Canvas(三)drawImage函数的使用

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区域内绘制。

推荐一个视频