HTML canvas drawImage() 方法
Image to use:
实例
将图像绘制到画布上：
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
亲自试一试 »
浏览器支持
表中的数字表示支持该方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法还可以绘制图像的一部分，或增加/减小图像大小。
JavaScript 语法
Position the image on the canvas:
| JavaScript 语法： | context.drawImage(img, x, y); |
|---|
在画布上定位图像，并指定图像的宽度和高度：
| JavaScript 语法： | context.drawImage(img, x, y, width, height); |
|---|
剪切图像并将剪切的部分放置在画布上：
| JavaScript 语法： | context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height); |
|---|
参数值
| 参数 | 描述 | Play it |
|---|---|---|
| img | 指定要使用的图像、画布或视频元素 | |
| sx | 可选。开始剪辑的 x 坐标 | Play it » |
| sy | 可选。y 坐标从哪里开始剪辑 | Play it » |
| swidth | 可选。裁剪图像的宽度 | Play it » |
| sheight | 可选。裁剪图像的高度 | Play it » |
| x | 将图像放置在画布上的 x 坐标 | Play it » |
| y | y 坐标在画布上放置图像的位置 | Play it » |
| width | 可选。要使用的图像宽度（拉伸或缩小图像） | Play it » |
| height | 可选。要使用的图像高度（拉伸或缩小图像） | Play it » |
更多实例
实例
在画布上定位图像，并指定图像的宽度和高度：
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 150, 180);
亲自试一试 »
实例
剪切图像并将剪切的部分放置在画布上：
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60);
亲自试一试 »
实例
要使用的视频（按播放开始演示）：
Canvas:
JavaScript（代码每 20 毫秒绘制一次视频的当前帧）：
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play', function() {var i = window.setInterval(function()
{ctx.drawImage(v, 5, 5, 260, 125)}, 20);}, false);
v.addEventListener('pause', function() {window.clearInterval(i);}, false);
v.addEventListener('ended', function() {clearInterval(i);}, false);
亲自试一试 »
❮ Canvas 对象
