HTML Canvas 圖片
HTML Canvas - 繪製圖像
drawImage() 方法可以在畫布上繪製一幅影像。
drawImage() 方法可以使用三種不同的語法
drawImage(image, dx, dy)drawImage(image, dx, dy, dwidth, dheight)drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
下面的示例解釋了這三種不同的語法。
drawImage(image, dx, dy)
drawImage(image, dx, dy) 語法將影像放置在畫布上。
示例
在畫布的 (10, 10) 位置繪製圖像
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 10, 10);
});
</script>
自己動手試一試 »
drawImage(image, dx, dy, dwidth, dheight)
drawImage(image, dx, dy, dwidth, dheight) 語法將影像放置在畫布上，並指定影像在畫布上的寬度和高度。
示例
在畫布的 (10, 10) 位置繪製圖像，寬度和高度均為 80 畫素
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 10, 10, 80, 80);
});
</script>
自己動手試一試 »
drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) 語法用於在將源影像放置到畫布之前對其進行裁剪。
示例
這裡我們從 (90, 130) 位置裁剪源影像，寬度為 50，高度為 60，然後將裁剪部分放置在畫布的 (10, 10) 位置，寬度和高度分別為 150 和 160 畫素（因此裁剪後的源影像也會被縮放/拉伸）
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");
image.addEventListener("load", (e) => {
ctx.drawImage(image, 90, 130, 50, 60, 10, 10, 150, 160);
});
</script>
自己動手試一試 »
以下是 drawImage() 方法的引數
| 引數 | 描述 |
|---|---|
| 圖片 | 必需。要繪製到上下文中的影像 |
| sx | 可選。源影像左上角的 x 座標（用於裁剪源影像） |
| sy | 可選。源影像左上角的 y 座標（用於裁剪源影像） |
| swidth | 可選。源影像裁剪的寬度（以畫素為單位） |
| sheight | 可選。源影像裁剪的高度（以畫素為單位） |
| dx | 在畫布上放置源影像左上角的 x 座標 |
| dy | 在畫布上放置源影像左上角的 y 座標 |
| dwidth | 可選。在目標畫布上繪製圖像的寬度。這允許縮放影像 |
| dheight | 可選。在目標畫布上繪製圖像的高度。這允許縮放影像 |
