HTML 畫布 - 資料屬性

ImageData 介面的 HTML Canvas data 屬性返回一個包含 ImageData 物件的所有畫素資料的陣列。

資料儲存在 RGBA 顏色順序的一維陣列中，並在將顏色應用到 Canvas 元素上呈現的圖形時由上下文物件訪問。

可能的輸入值

它返回一個一維陣列，其中包含物件在 RGBA 顏色順序中的畫素資料，值介於 0 和 255（包括兩者）。

示例 1 −（從控制檯和視窗警報中獲取資料長度）

以下示例建立一個簡單的 ImageData 物件並使用控制檯和視窗警報獲取其長度和陣列資料。

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

輸出

網頁上返回的程式碼輸出為 −

視窗警報返回的輸出為 −

控制檯返回的輸出為 −

示例

以下示例透過使用建立的影像物件使用 Canvas 元素上的 data 屬性繪製一個簡單的 rgba 圖案。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black; "></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var imgdata = new ImageData(200, 150);
      for (let i = 0; i < imgdata.data.length; i += 4) {
         imgdata.data[i + 0] = 122;
         imgdata.data[i + 1] = 255;
         imgdata.data[i + 2] = 144;
         imgdata.data[i + 3] = 100;
      }
      context.putImageData(imgdata, 25, 25);
   </script>
</body>
</html>

輸出

影像返回的輸出為 −

html_canvas_images.htm

列印頁面