HTML Canvas - putImageData() 方法

HTML Canvas 的putImageData()方法從 ImageData 物件獲取可用資料，並將其繪製到 Canvas 元素上。

如果提供的是髒圖形，則獲取圖形中的畫素並將其列印到畫布元素上。

語法

以下是 HTML Canvas putImageData() 方法的語法：

CanvasRenderingContext2D.putImageData(data, x, y, dx, dy, dwidth, dheight);

引數

以下是此方法的引數列表：

序號	引數和描述
1	data 包含畫素陣列值的 ImageData 物件。
2	x ImageData 物件在畫布中的 x 座標位置。
3	y ImageData 物件在畫布中的 y 座標位置。
4	dx 要從中提取 ImageData 物件的左上角的 x 座標位置。
5	dy 要從中提取 ImageData 物件的左上角的 y 座標位置。
6	dwidth 要繪製到畫布上的矩形的寬度，預設為 ImageData 物件的寬度。
7	dheight 要繪製到畫布上的矩形的高度，預設為 ImageData 物件的高度。

返回值

建立一個新的 ImageData 物件，該物件收集可用資料並將其繪製到 HTML Canvas 元素上。

示例

以下示例在畫布元素上繪製一個圓圈，並使用此方法獲取其一部分，然後在給定座標處將新的ImageData物件元素繪製到畫布上。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="350" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.arc(90, 90, 75, 1 * Math.PI, 5 * Math.PI);
         context.fillStyle = 'green';
         context.fill();
         var data = context.getImageData(100, 90, 50, 50);
         context.putImageData(data, 250, 25);
      }
   </script>
</body>
</html>

輸出

以下程式碼在網頁上返回的輸出如下：

示例

以下示例在畫布元素上繪製一個矩形，並使用此方法獲取其一部分，然後在給定座標處將新的ImageData物件元素繪製到畫布上。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="350" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.fillRect(15, 15, 200, 150);
         var data = context.getImageData(100, 90, 50, 50);
         context.putImageData(data, 250, 25, 15, 15, 75, 75);
      }
   </script>
</body>
</html>

輸出

以下程式碼在網頁上返回的輸出如下：

html_canvas_images.htm

列印頁面