【图像与视频】HTML5 Canvas 图像的绘制 drawImage()绘制图片或视频帧

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

介绍

HTML5 Canvas提供了极为丰富的图像支持。首先让我们从最简单的做起：“如何在Canvas上绘制图片或视频帧”。

在线演示  详细代码

 

解读

drawImage()方法可以将一幅图像或视频帧的整体或某个部分绘制到canvas内的任意位置上。所绘制的图像叫做“源图像”（source image简称s），绘制到的地方叫做“目标canvas”（destination canvas简称d）。

这里的image参数可以是HTMLImageElement对象、HTMLCanvasElement对象、HTMLVideoElement对象。

（1）第一种用法：将图像绘制在canvas的制定位置上

 drawImage(image,dx,dy);

（2）第二种用法：将完整图像根据目标区域的高度和宽度进行缩放。

drawImage(image,dx,dy,dw,dh);

（3）第三种用法：将图像绘制到指定位置并进行缩放。

drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

drawImage()方法的用法

方法	描述
drawImage(HTMLImageElement image,double sx,double,sy,double sw,double sh,double dx,double dy,double dw,double dh)	将图像绘制到canvas之中。如果该图像参数是一个HTMLVideoElement类型到视频对象，那么drawImage()方法就会将视频的当前帧绘制出来，这个图像参数也可以是另一个HTMLCanvasElement的canvas对象。 向canvas之中绘制的图像可以是一整幅也可以是一部分，并在绘制的时候有可能要进行缩放。源图像中需要被绘制的区域是通过sx、sy、sw、sh参数来确定的，浏览器会根据dw、dh参数对所绘制内容进行缩放。 方法的各种用法中，只有前三个是必须的。

drawImage()在使用前要图像要已经加载完毕，通常我们会将其放在onload毁掉函数中以确保这一点。

drawImage() 在绘制图像时不会考虑当前路径，然而，它却会将globalAlpha设置、阴影效果、剪辑区域，以及全局图像合成操作符等属性运用到图像到绘制之中。