CanvasRenderingContext2D
.drawImage()
是 Canvas 2D API 中的方法,它提供了多种方式来在Canvas上绘制图像。
语法
void ctx.drawImage(image, dx, dy); void ctx.drawImage(image, dx, dy, dWidth, dHeight); void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
参数
image
- 绘制到上下文的元素。允许任何的 canvas 图像源(
CanvasImageSource
),例如:HTMLImageElement
,HTMLVideoElement
,或者HTMLCanvasElement
。 dx
- 目标画布的左上角在目标canvas上 X 轴的位置。
dy
- 目标画布的左上角在目标canvas上 Y 轴的位置。
dWidth
- 在目标画布上绘制图像的宽度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片宽度不会缩放。
dHeight
- 在目标画布上绘制图像的高度。 允许对绘制的图像进行缩放。 如果不说明, 在绘制时图片高度不会缩放。
sx
- 需要绘制到目标上下文中的,源图像的矩形选择框的左上角 X 坐标。
sy
- 需要绘制到目标上下文中的,源图像的矩形选择框的左上角 Y 坐标。
sWidth
- 需要绘制到目标上下文中的,源图像的矩形选择框的宽度。如果不说明,整个矩形从坐标的sx和sy开始,到图像的右下角结束。
sHeight
- 需要绘制到目标上下文中的,源图像的矩形选择框的高度。
抛出异常
INDEX_SIZE_ERR
- 如果 canvas 或者图像矩形区域的宽度或高度为0 。
INVALID_STATE_ERR
- 图像没有数据。
TYPE_MISMATCH_ERR
- 提供的原始元素不支持。
示例
使用 drawImage
方法
这是一段使用 drawImage
方法的简单的代码片段。
HTML
<canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> </div>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById('source'); ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
修改下面的代码并实时查看 canvas 的变化:
规范说明
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.drawImage |
Living Standard |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
兼容性注解
- 在 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)中,支持通过给 sw 和 sh 赋负值,对图像进行翻转。
- 从 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 开始,
drawImage()
按照规范处理负参数,沿着合适的轴翻转矩形。 - 从(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)开始,当drawImage()调用
null
或者undefined
图像时,会抛出TYPE_MISMATCH_ERR
异常。 - 在 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)之前, 如果坐标值是非规定值或者是0,Firefox 会抛出一个异常。 按照规范描述,这种情况不会再发生。
- Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)现在完全支持 CORS 跨域绘制图像,不需要污染的 canvas.
- Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 现在允许 SVG 作为图像被绘制到 canvas ,不需要 污染的 canvas.
参见
- 接口定义,
CanvasRenderingContext2D
.