如何在 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 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.