js drawimage绘制图像|极客笔记

js drawimage绘制图像

介绍

在前端开发中，绘制图像是一项常见的任务。JavaScript提供了drawImage方法，可以在Canvas上绘制图像。本文将详细介绍使用drawImage方法绘制图像的基本用法，并提供一些示例代码。

绘制方式

drawImage方法有三种不同的绘制方式：

将整个图像绘制到Canvas上：

context.drawImage(image, x, y);

上述代码中，image参数是要绘制的图像的对象，在我们的示例中，可以是一个<img>元素。x和y是图像在Canvas上的坐标。

仅绘制图像的一部分：

context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);

上述代码中，sx和sy是原始图像的起始坐标，swidth和sheight是需要绘制的图像的宽度和高度。x和y是图像在Canvas上的坐标，width和height是绘制出来的图像的宽度和高度。

在绘制时对图像进行缩放：

context.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);

示例

绘制整张图片

首先，我们选择一张图片进行绘制。假设我们有一张图片image.jpg，我们想要将其绘制在Canvas上：

<!DOCTYPE html>
<html>
  <head>
    <title>Draw Image Example</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();

      image.onload = function() {
        context.drawImage(image, 0, 0);
      };

      image.src = 'image.jpg';
    </script>
  </body>
</html>

上述代码中，我们首先获取canvas元素和其上下文。然后，创建一个<img>元素，并将其赋值给image变量。通过给image变量的src属性赋值，我们加载了指定的图片。当图片加载完成时，我们使用drawImage方法将图片绘制在Canvas上。0, 0表示将图片绘制在Canvas的左上角。

绘制部分图像

接下来，我们将演示如何绘制图像的一部分。我们使用同样的图片image.jpg，但这次我们只绘制它的一部分：

<!DOCTYPE html>
<html>
  <head>
    <title>Draw Image Example</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();

      image.onload = function() {
        context.drawImage(image, 100, 100, 300, 300, 0, 0, 200, 200);
      };

      image.src = 'image.jpg';
    </script>
  </body>
</html>

上述代码中，我们在drawImage方法中传入了多个参数。100, 100, 300, 300表示我们要绘制的图像的起始坐标(100, 100)、宽度和高度(300, 300)。0, 0, 200, 200表示在Canvas上绘制出来的图像的起始坐标(0, 0)、宽度和高度(200, 200)。

缩放图像

最后，我们来演示如何在绘制图像时进行缩放。使用同样的图片image.jpg，但这次我们将图像按照一定比例进行缩放：

<!DOCTYPE html>
<html>
  <head>
    <title>Draw Image Example</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();

      image.onload = function() {
        context.drawImage(image, 0, 0, image.width, image.height, 0, 0, 200, 200);
      };

      image.src = 'image.jpg';
    </script>
  </body>
</html>

上述代码中，我们在drawImage方法中传入了多个参数。0, 0表示我们要绘制的图像的起始坐标(0, 0)。image.width, image.height表示我们绘制图像的宽度和高度与原始图像的宽度和高度保持一致，即按照1:1的比例进行绘制。0, 0, 200, 200表示在Canvas上绘制出来的图像的起始坐标(0, 0)、宽度和高度(200, 200)。