我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
介绍
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(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设置、阴影效果、剪辑区域,以及全局图像合成操作符等属性运用到图像到绘制之中。