drawimage _

drawImage 是 HTML5 canvas 元素的方法，用于在画布上绘制图像。它可以接受不同的参数来指定图像的源、位置和尺寸。，，“

javascript，var canvas = document.getElementById('myCanvas');，var ctx = canvas.getContext('2d');，var img = new Image();，img.onload = function() {，  ctx.drawImage(img, 0, 0, 100, 100);，};，img.src = 'myImage.png';，

“，，在这个例子中，我们首先获取 canvas 元素的上下文，并创建一个新的 Image 对象。我们将图像源设置为 ‘myImage.png’，并在图像加载完成后使用 drawImage 方法将图像绘制到 canvas 上。

drawImage() 是 HTML5 Canvas 2D API 中的一个方法，用于在 canvas 元素上绘制图像，它接受以下参数：

（图片来源网络，侵删）

1、要绘制的图像（通常是<img> 元素的引用或一个ImageBitmap 对象）。

2、目标矩形的左上角 x 坐标。

3、目标矩形的左上角 y 坐标。

4、目标矩形的宽度（可选，默认为图像原始宽度）。

5、目标矩形的高度（可选，默认为图像原始高度）。

6、源矩形的左上角 x 坐标（可选，默认为 0）。

7、源矩形的左上角 y 坐标（可选，默认为 0）。

8、源矩形的宽度（可选，默认为图像原始宽度）。

（图片来源网络，侵删）

9、源矩形的高度（可选，默认为图像原始高度）。

以下是一个使用drawImage() 的简单示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
  <script>
    // 获取 canvas 元素和绘图上下文
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    // 创建一个新的图像
    const img = new Image();
    img.src = 'path/to/your/image.jpg';
    // 确保图像已加载完成
    img.onload = function() {
      // 使用 drawImage() 方法绘制图像
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
  </script>
</body>
</html>

在这个示例中，我们首先获取了 canvas 元素和它的绘图上下文，我们创建了一个新的图像，并设置了它的src 属性，当图像加载完成后，我们使用drawImage() 方法将其绘制到 canvas 上。