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

规范描述

浏览器兼容性

兼容性注解

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

参见

• 接口定义，CanvasRenderingContext2D.
• ImageData
• canvas像素控制