Canvas createImageData() 方法

Canvas 参考手册

定义和用法

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

  • R - 红色 (0-255)
  • G - 绿色 (0-255)
  • B - 蓝色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

因此 ，transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 ImageData 对象的四倍。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() Ang paraan na ito ay magpapakopya ng datos ng imahen pabalik sa kanvas.

Halimbawa:

Ang syntax na ito ay magiging pula ang unang pixel ng ImageData object:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

Ang syntax na ito ay magiging pula ang ikalawang pixel ng ImageData object:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

Mga Halimbawa

Lumikha ng 100*100 pixel na ImageData object kung saan ang bawat pixel ay pula, at ilagay ito sa kanvas:

Ang iyong browser ay hindi sumusuporta sa HTML5 canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i+0]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,10,10);

Subukan Ngayon!

Mga Syntax

May dalawang bersyon ang createImageData() method:

1. lumikha ng bagong ImageData object na may tinukoy na laki (sa porsyento ng pixel):

var imgData=context.createImageData(width,height);

2. lumikha ng bagong ImageData object na may parehong laki ng isang ibang ImageData object (hindi nai-kopya ang datos ng imaheng):

var imgData=context.createImageData(imageData);

Halaga ng Parametro

Parametro Paglalarawan
width Ang lapad ng ImageData object, sa porsyento ng pixel.
height Ang taas ng ImageData object, sa porsyento ng pixel.
imageData Isa pang ImageData object.

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

Canvas 参考手册