圖片使用方法：
例
繪製圖像到畫布上：
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); 試一試»