HTML | 画布 createImageData() 方法

简介

createImageData() 方法是 HTML 画布中的一个方法，用于创建一个指定宽高的空白图像数据，具体使用方法为：createImageData(width, height)。

参数

createImageData() 方法的参数如下：

• width: 新建图像数据的宽度，在像素单位下。
• height: 新建图像数据的高度，在像素单位下。

返回值

createImageData() 方法返回一个对象 ImageData，该对象包含以下属性和方法：

• width: 图像数据的宽度。
• height: 图像数据的高度。
• data: 包含图像的实际像素数据的一维数组。

此对象可以作为 putImageData() 方法的参数使用，从而将图像数据绘制在画布上。

示例

以下是一个简单的示例，创建一个宽度为 100 像素、高度为 100 像素的空白图像数据，并将其绘制在画布上：

// 创建画布
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 创建图像数据
var imgData = ctx.createImageData(100, 100);

// 绘制图像数据
ctx.putImageData(imgData, 0, 0);

以上代码中，imgData 对象是通过调用 createImageData() 方法创建的一个指定宽高的空白图像数据，然后通过 putImageData() 方法将其绘制在画布上。具体操作可以参考运行下面的代码片段：

<canvas id="canvas" width="100" height="100"></canvas>

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var imgData = ctx.createImageData(100, 100);
  ctx.putImageData(imgData, 0, 0);
</script>

注意事项

• createImageData() 方法不会影响画布上的任何像素，并且不会清除画布上已有的图像数据。
• 在使用 putImageData() 方法时，如果图像数据的像素数不等于画布上相应区域的像素数，则不会出现错误，但画布上只会绘制相应区域的部分像素。