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

打印页面