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 | 可选。在目标画布上绘制图像的高度。这允许缩放图像 |
