HTML Canvas - drawImage() 方法

HTML Canvas 的drawImage() 方法是 Canvas 2D API 提供的一种在 Canvas 元素上绘制/添加图像的不同方式。

语法

以下是 HTML Canvas drawImage() 方法的语法：

CanvasRenderingContext2D.drawImage(image, sx, sy, s	w, sh, dx, dy, dw, dh);

参数

以下是此方法的参数列表：

序号	参数及描述
1	image 要绘制到 Canvas 元素上的图像元素，作为参数传递给方法。
2	sx 源图像左上角在 Canvas 中的 x 坐标位置。
3	sy 源图像左上角在 Canvas 中的 y 坐标位置。
4	sw 源图像的宽度。
5	sh 源图像的高度。
6	dx 在目标 Canvas 中放置源图像左上角的 x 坐标位置。
7	dy 在目标 Canvas 中放置源图像左上角的 y 坐标位置。
8	dw 在目标 Canvas 中绘制的图像宽度。
9	dh 在目标 Canvas 中绘制的图像高度。

返回值

使用drawImage() 方法和 canvas 上下文创建的图像对象，将图像绘制到 Canvas 元素上。

示例

以下示例使用 HTML Canvas drawImage() 方法将图像绘制到 Canvas 元素上。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();
      image.onload = function() {
         context.drawImage(image, 50, 50);
      };
      image.src = 'https://tutorialspoint.com/html5/images/logo.png';
   </script>
</body>
</html>

输出

网页上图像返回的输出如下：

示例

以下示例使用源和目标参数，将部分图像绘制到 Canvas 上，用于drawImage() 方法。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();
      image.onload = function() {
         context.drawImage(image, 10, 10, 150, 100, 25, 25, 150, 100);;
      };
      image.src = 'https://tutorialspoint.com/html5/images/logo.png';
   </script>
</body>
</html>

输出

网页上图像返回的输出如下：

html_canvas_images.htm

打印页面