HTML Canvas - createImageData() 方法

HTML Canvas 的createImageData() 方法 (Canvas 2D API) 在 Canvas 元素中建立一個 ImageData 物件。

語法

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

CanvasRenderingContext2D.createImageData(data, width, height);

引數

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

序號	引數及描述
1	width 賦給ImageData 物件的寬度值。
2	height 傳遞給ImageData 物件的高度值。(原文有誤，應為height)
3	data 此 data 物件是一個現有的ImageData 物件，其 width 和 height 等屬性將被複制到新物件。

序號

引數及描述

width

賦給ImageData 物件的寬度值。

height

傳遞給ImageData 物件的高度值。(原文有誤，應為height)

data

此 data 物件是一個現有的ImageData 物件，其 width 和 height 等屬性將被複制到新物件。

返回值

建立一個具有指定高度和寬度的新ImageData 物件。預設情況下，它填充為透明黑色畫素。

示例

以下示例使用 HTML Canvas createImageData() 方法建立一個空白ImageData 物件，並使用視窗警告返回其值。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var imgdata = context.createImageData(55, 55);
      console.log(imgdata);
   </script>
</body>
</html>

輸出

網頁上影像返回的輸出為：

控制檯中顯示的資料為：

示例

以下示例演示如何使用 HTML Canvas createImageData() 方法在 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="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         var i, imageData = context.createImageData(100, 100);
         for (i = 0; i < imageData.data.length; i += 4) {
            imageData.data[i + 0] = 200;
            imageData.data[i + 1] = 100;
            imageData.data[i + 2] = 100;
            imageData.data[i + 3] = 200;
         }
         context.putImageData(imageData, 15, 15);
      }
   </script>
</body>
</html>

輸出

網頁上影像返回的輸出為：

html_canvas_images.htm

列印頁面