CanvasRenderingContext2D.createImageData() - Web API 接口参考 编辑

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

规范

浏览器兼容

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

兼容性注解

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

参见

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