Canvas drawImage() 方法
要使用的图像
示例
将图像绘制到画布上
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
自己动手试一试 »
描述
drawImage() 方法会在画布上绘制图像、画布或视频。
drawImage() 方法还可以绘制图像的一部分，以及/或放大/缩小图像。
语法
定位图像在画布上的位置
| context.drawImage(img, x, y) |
定位图像在画布上的位置，并指定图像的宽度和高度
| context.drawImage(img, x, y, width, height) |
裁剪图像并将裁剪后的部分放置在画布上
| context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height) |
参数值
| 参数 | 描述 | 试一试 |
|---|---|---|
| img | 指定要使用的图像、画布或视频元素 | |
| sx | 可选。开始裁剪的 x 坐标 | 试一试 » |
| sy | 可选。开始裁剪的 y 坐标 | 试一试 » |
| swidth | 可选。裁剪图像的宽度 | 试一试 » |
| sheight | 可选。裁剪图像的高度 | 试一试 » |
| x | 在画布上放置图像的 x 坐标 | 试一试 » |
| y | 在画布上放置图像的 y 坐标 | 试一试 » |
| width | 可选。要使用的图像宽度（拉伸或缩小图像） | 试一试 » |
| height | 可选。要使用的图像高度（拉伸或缩小图像） | 试一试 » |
返回值
| 无 |
更多示例
示例
定位图像在画布上的位置，并指定图像的宽度和高度
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);
自己动手试一试 »
示例
裁剪图像并将裁剪后的部分放置在画布上
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
自己动手试一试 »
示例
要使用的视频（按下播放开始演示）
画布
JavaScript（代码每 20 毫秒绘制视频的当前帧）
const video = document.getElementById("video1");
const canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
v.addEventListener('play', function() {var i = window.setInterval(function() {ctx.drawImage(v, 5, 5, 260, 125)}, 20);}, false);
video.addEventListener('pause', function() {window.clearInterval(i);}, false);
video.addEventListener('ended', function() {clearInterval(i);}, false);
自己动手试一试 »
浏览器支持
<canvas> 元素是 HTML5 标准（2014）。
drawImage() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
