如何在 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 上传的 img 的输出，并且画布将被触发并绘制与我们在网页上上传的 img 相同的图像。

示例 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 上传的 img 的输出，画布将被激活并绘制与我们在网页上上传的 img 相同的图像，同时包含 width 和 height 属性。

更新于：2023年4月4日

442 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告