CanvasRenderingContext2D.drawImage()

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);

drawImage

参数

image
绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource),例如:HTMLImageElementHTMLVideoElement,或者 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 的变化:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div style="display:none;">
  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
</div>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

规范说明

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.

参见

文档标签和贡献者

 此页面的贡献者: Serifx, ice-i-snow
 最后编辑者: Serifx,