HTML | 画布 drawImage() 方法

在 HTML 的 canvas 元素中，drawImage() 方法用于在画布上绘制图像。

语法

context.drawImage(img, x, y);
context.drawImage(img, x, y, width, height);
context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数

• img：需要绘制的图像，可以是 image、canvas 或 video 元素。
• x：在画布上绘制图像的起始 x 坐标位置。
• y：在画布上绘制图像的起始 y 坐标位置。
• width：绘制图像的宽度，可选参数。
• height：绘制图像的高度，可选参数。
• sx：需要绘制的图像的起始 x 坐标位置，可选参数。
• sy：需要绘制的图像的起始 y 坐标位置，可选参数。
• sWidth：需要绘制的图像的宽度，可选参数。
• sHeight：需要绘制的图像的高度，可选参数。
• dx：在画布上放置图像的起始 x 坐标位置，可选参数。
• dy：在画布上放置图像的起始 y 坐标位置，可选参数。
• dWidth：在画布上绘制图像的宽度，可选参数。
• dHeight：在画布上绘制图像的高度，可选参数。

示例

在画布上绘制图像

<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var img = new Image();
  img.src = 'image.png';
  context.drawImage(img, 0, 0);
</script>

上述示例中，我们通过获取 canvas 元素的上下文对象（getContext('2d')）来使用 drawImage() 方法在画布上绘制了一张图片。

裁剪图像并在画布上绘制

<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var img = new Image();
  img.src = 'image.png';
  context.drawImage(img, 50, 50, 50, 50, 0, 0, 150, 150);
</script>

上述示例中，我们通过指定需要绘制的图像的起始坐标以及宽度和高度，将原图像裁剪为目标图像，并在画布上将目标图像绘制出来。

结论

以上是 HTML 画布 drawImage() 方法的介绍，它可以用于在画布上绘制图像，也可以对图像进行裁剪并在画布上绘制。使用起来十分简单，需要注意的是参数的含义和取值范围。