కాన్వాస్ డాటా అనునాదు

Canvas పరిశీలన పత్రం

నిర్వచనం మరియు వినియోగం

data అనునాదు ఒక అబ్జెక్ట్ బాక్స్ అందిస్తుంది, దానిలో ప్రస్తావించిన ఇమేజ్ డాటా అబ్జెక్ట్ చిత్ర డాటా ఉంటుంది。

ప్రతి ఇమేజ్ డాటా అబ్జెక్ట్ పిక్సెల్స్ కు నాలుగు రకాల సమాచారం ఉంది, అవి ఆర్జిబిఎ విలువలు:

  • 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 ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
Chrome ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
4.0 9.0 3.6 4.0 10.1

ప్రకటనలు:Internet Explorer 8 మరియు అదే ముందుగా వెబ్ క్రాఫ్ట్ పెరియల్ ఆబ్జెక్ట్ మద్దతు లేదు.

Canvas పరిశీలన పత్రం