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  

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

兼容性注解

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

参见

文档标签和贡献者

此页面的贡献者: zhangchen, ice-i-snow
最后编辑者: zhangchen,