Canvas drawImage() 方法
要使用的图片
示例
将图片绘制到画布上
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
亲自试一试 »
描述
The drawImage() 方法将图片、画布或视频绘制到画布上。
The 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);
亲自试一试 »
浏览器支持
The <canvas> 元素是 HTML5 标准 (2014)。
drawImage() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
