drawImage的使用方法

drawImage是HTML5 Canvas API中的一个方法，用于在画布上绘制图像。它的语法如下：

context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数解释如下：

- image：要绘制的图像，可以是HTMLImageElement、HTMLCanvasElement或HTMLVideoElement。
- sx：可选，源图像的起点X坐标。
- sy：可选，源图像的起点Y坐标。
- sWidth：可选，源图像的宽度。
- sHeight：可选，源图像的高度。
- dx：目标图像的起点X坐标。
- dy：目标图像的起点Y坐标。
- dWidth：可选，目标图像的宽度。
- dHeight：可选，目标图像的高度。

使用方法示例：

const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = 'example.jpg';
image.onload = function() {
  // 绘制整个图像
  ctx.drawImage(image, 0, 0);
  // 绘制部分图像
  ctx.drawImage(image, 10, 10, 50, 50, 100, 100, 50, 50);
};

以上代码会在id为`my-canvas`的canvas元素上绘制一张名为`example.jpg`的图片，其中第二个`drawImage`方法会先在图片中取出左上角坐标为(10, 10)，宽度为50，高度为50的部分，再将其放大到画布上坐标为(100, 100)，宽度为50，高度为50的位置。