画布 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 |
❮ 画布 参考
