如何在HTML5中使用drawImage()绘制图像？

“canvas”元素仅仅作为视觉元素的容器；绘制图形需要使用脚本语言。它是一个过程化的、低级的模型，没有内部场景来更新位图。

我们使用drawImage()函数将图像绘制到画布上。此功能将视频、画布或图片传输到画布。

语法

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

其中，

  • Img − 确定是使用视频、画布还是图像。

  • Sx − 剪裁的起始x坐标。

  • Sy − 剪裁的起始y坐标。

  • Swidth − 剪裁图像的宽度。

  • Sheight − 剪裁图像的高度。

  • Width − 将要使用的图像宽度（拉伸或缩小图像）。

  • Height − 将要使用的图像高度（拉伸或缩小图像）。

  • X − 图像在画布上位置的x坐标。

  • Y − 图像在画布上位置的y坐标。

以下是示例……

示例1

使用drawImage()方法

在下面的示例中，我们使用drawImage()方法绘制图像。

<!DOCTYPE html>
<html>
<body>
   <p>Photo</p>
   <img id="image" src="C:\Users\Lenovo\Desktop\Tutorialspoint\1.jpg" />
   <p>Canvas:</p>
   <canvas id="newCanvas" width="1000" height="300"
      style="border: 5px solid black">
   </canvas>
   <script>
      window.onload = function () {
         var canvas = document.getElementById("newCanvas");
         var ctx = canvas.getContext("2d");
         var image = document.getElementById("image");
         ctx.drawImage(image, 100, 20,);
      };
   </script>
</body>
</html>

执行上述脚本后，它将生成一个包含使用src上传的图像的输出，并且画布将被触发并绘制与我们在网页上上传的图像相同的图像。

示例2

添加width和height属性

在下面，我们使用drawImage()绘制图像，并添加width和height属性以获得所需大小的图像。

<!DOCTYPE html>
<html>
<body>
   <p>Photo</p>
   <img id="pic" src="C:\Users\Lenovo\Desktop\Tutorialspoint\3.jpg" />
   <p>Canvas:</p>
   <canvas id="newCanvas" width="400" height="300"
      style="border: 5px solid black">
   </canvas>
   <script>
      window.onload = function () {
         var canvas = document.getElementById("newCanvas");
         var ctx = canvas.getContext("2d");
         var image = document.getElementById("pic");
         ctx.drawImage(image, 100, 20,150,160);
      };
   </script>
</body>
</html>

脚本执行后，它将生成一个包含使用src上传的图像的输出，并且画布将被激活并绘制与我们在网页上上传的图像相同的图像，同时包含宽度和高度。

更新于：2023年4月4日

446 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告