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 参考
