HTML 画布 图像
HTML 画布 - 绘制图像
The drawImage() 方法将图像绘制到画布上。
The 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)
The 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)
The 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)
The 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() 方法的参数
| 参数 | 描述 |
|---|---|
| image | 必填。要绘制到上下文中的图像 |
| sx | 可选。源图像左上角的 x 坐标（用于裁剪源图像） |
| sy | 可选。源图像左上角的 y 坐标（用于裁剪源图像） |
| swidth | 可选。源图像裁剪的宽度，以像素为单位 |
| sheight | 可选。源图像裁剪的高度，以像素为单位 |
| dx | 在画布中放置源图像左上角的 x 坐标 |
| dy | 在画布中放置源图像左上角的 y 坐标 |
| dwidth | 可选。在目标画布中绘制图像的宽度。这允许缩放图像 |
| dheight | 可选。在目标画布中绘制图像的高度。这允许缩放图像 |
