CanvasRenderingContext2D.createImageData()方法

返回到：Canvas API：CanvasRenderingContext2D

本节课，我们学习CanvasRenderingContext2D.createImageData()方法。

CanvasRenderingContext2D.createImageData() 是 Canvas 2D API 创建一个新的、空白的、指定大小的 ImageData 对象。所有的像素在新对象中都是透明的。

语法

ImageData ctx.createImageData(width, height);
ImageData ctx.createImageData(imagedata);

参数

width

ImageData 新对象的宽度。

height

ImageData 新对象的高度。

imagedata

从现有的 ImageData 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。

返回值

指定了宽度和高度的，新的 ImageData 对象。新对象使用透明的像素进行填充。

抛出错误

IndexSizeError

如果宽度或者高度变量值为零，会抛出此异常。

示例

使用 createImageData 方法

这是一段简单地使用 createImageData 方法的代码片段。获取更多信息，请看 canvas 像素控制 和 ImageData 对象。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();

console.log(ctx.createImageData(100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }

返回到：Canvas API：CanvasRenderingContext2D