Canvas drawImage() 方法
定義和用法
drawImage() 方法在畫布上繪制圖像、畫布或視頻。
drawImage() 方法也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。
實例
例子 1
要使用的圖片：
向畫布上面繪制圖片：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
提示：頁面底部提供更多實例。
語法
JavaScript 語法 1
在畫布上定位圖像：
context.drawImage(img,x,y);
JavaScript 語法 2
在畫布上定位圖像，并規定圖像的寬度和高度：
context.drawImage(img,x,y,width,height);
JavaScript 語法 3
剪切圖像，并在畫布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
參數值
| 參數 | 描述 |
|---|---|
| img | 規定要使用的圖像、畫布或視頻。 |
| sx | 可選。開始剪切的 x 坐標位置。 |
| sy | 可選。開始剪切的 y 坐標位置。 |
| swidth | 可選。被剪切圖像的寬度。 |
| sheight | 可選。被剪切圖像的高度。 |
| x | 在畫布上放置圖像的 x 坐標位置。 |
| y | 在畫布上放置圖像的 y 坐標位置。 |
| width | 可選。要使用的圖像的寬度。（伸展或縮小圖像） |
| height | 可選。要使用的圖像的高度。（伸展或縮小圖像） |
更多實例
例子 2
在畫布上對圖像進行定位，然后規定圖像的寬度和高度：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
例子 3
剪切圖片，并在畫布上對被剪切的部分進行定位：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);
例子 4
要使用的視頻（請按下播放鍵以開始演示）：
畫布：
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,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
瀏覽器支持
表中的數字注明了首個完全支持該屬性的瀏覽器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
