Canvas data attribute

Canvas 参考手册

Paglilinaw at Paggamit

data Ang attribute ay ibibigay ng isang object na naglalaman ng mga datos ng imaheng tinukoy ng ImageData object.

Para sa bawat pixel ng ImageData object, mayroong apat na pangunahing impormasyon, na ang mga RGBA na halaga:

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

color/alpha 以数组形式存在，并存储于ImageData对象的 data 属性中。

例子：

将ImageData对象中的第一个像素变为红色的语法：

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

将ImageData对象中的第二个像素变为绿色的语法：

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

提示：请参阅 createImageData()、getImageData() 以及 putImageData() 方法，以获得更多关于ImageData对象的知识。

实例

创建一个100*100像素的ImageData对象，其中每个像素都被设置为红色：：

您的浏览器不支持canvas标签。

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);

亲自试一试

语法

imageData.data;

浏览器支持

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

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 参考手册