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] }

规范

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.createImageData
Living Standard  

浏览器兼容

BCD tables only load in the browser

兼容性注解

  • 从 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)开始:
    • 如果矩形小于指定的1个像素,createImageData() 会返回图像数据至少1个像素值。
    • 当调用 createImageData() 指定非限制值时,会抛出NOT_SUPPORTED_ERR exception异常。
    • createImageData() 根据规定处理负数变量,会围绕对称轴翻转矩形区域。

参见