MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

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
WHATWG HTML Living Standard
CanvasRenderingContext2D.createImageData
Living Standard  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

兼容性注解

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

参见

文档标签和贡献者

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