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

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告