图片使用方法：
例
绘制图像到画布上：
JavaScript的：
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}; 试一试» 浏览器支持
在表中的数字指定完全支持方法的第一个浏览器的版本。
| 方法 | |||||
|---|---|---|---|---|---|
| drawImage() | 是 | 9 | 是 | 是 | 是 |
定义和用法
该drawImage()方法绘制的图像，帆布或视频到画布上。
该drawImage()方法也可以绘制部分图像，和/或增加/减小图像尺寸。
 | 注意：您不能调用drawImage()方法中的图像加载之前。 要确保已经加载了，你可以调用drawImage() from window.onload()或者从document.getElementById(" imageID ").onload 。 |
|---|
JavaScript语法
在画布上的图像位置：
| 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); |
|---|
参数值
| 参数 | 描述 | 播放 |
|---|---|---|
| img | 指定图像，帆布，或视频使用元素 | |
| sx | 可选的。 x坐标从哪里开始裁剪 | 播放 ” |
| sy | 可选的。 y坐标从哪里开始裁剪 | 播放 ” |
| swidth | 可选的。 所述截取图像的宽度 | 播放 ” |
| sheight | 可选的。 所述截取图像的高度 | 播放 ” |
| x | x坐标在哪里将图像放置在画布上 | 播放 ” |
| y | y坐标在哪里将图像放置在画布上 | 播放 ” |
| width | 可选的。 图像的宽度用（拉伸或缩小图像） | 播放 ” |
| height | 可选的。 图像的高度使用（拉伸或缩小图像） | 播放 ” |
更多示例
例
画布上的图像的位置，并指定图像的宽度和高度：
JavaScript的：
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
}; 试一试» 例
裁剪图像和画布上的裁剪部分的位置：
JavaScript的：
window.onload = function() {
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);
}; 试一试» 例
视频使用（按PLAY开始演示）：
帆布：
的JavaScript（代码绘制视频每20毫秒的当前帧）：
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;
v.addEventListener('play',function() {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); 试一试»