Canvas drawImage() 方法
要使用的影像
示例
將影像繪製到畫布上
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
自己動手試一試 »
描述
drawImage() 方法會在畫布上繪製圖像、畫布或影片。
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);
自己動手試一試 »
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
drawImage() 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
