HTML DOM drawImage() 方法
JavaScript基础 2022-06-19 23:56:40小码哥的IT人生shichen
HTML DOM drawImage() 方法
定义和用法
drawImage() 方法绘制一幅图像。
语法
drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight)参数
| 参数 | 描述 |
|---|---|
| image | 所要绘制的图像。 这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。 |
| x, y | 要绘制的图像的左上角的位置。 |
| width, height | 图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。 |
| sourceX, sourceY | 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。 |
| sourceWidth, sourceHeight | 图像所要绘制区域的大小，用图像像素表示。 |
| destX, destY | 所要绘制的图像区域的左上角的画布坐标。 |
| destWidth, destHeight | 图像区域所要绘制的画布大小。 |
描述
drawImage() 方法有 3 个变形。第一个变形把整个图像复制到画布，将其放置到指定点的左上角，并且将每个图像像素映射成画布坐标系统的一个单元。第二个变形也把整个图像复制到画布，但是允许您用画布单位来指定想要的图像的宽度和高度。第三个变形则是完全通用的，它允许您指定图像的任何矩形区域并复制它，对画布中的任何位置都可进行任何的缩放。
传递给 drawImage() 方法的图像必须是 Image 对象或 Canvas 元素。一个 Image 对象能够表示文档中的一个 <img> 标记或者使用 Image() 构造函数所创建的一个屏幕外图像。
