HTML కాన్వాస్ డాటా అంశం

HTML5 Canvas సంపూర్ణ పరిశీలనాగారం

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

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

ఇమేజ్‌డాటా అంబార్తులోని ప్రతి పిక్సెల్‌కు నాలుగు రంగు సమాచారాలు ఉన్నాయి, అవి RGBA విలువలు:

  • R - ఎరుపు (0-255)
  • G - హరిత (0-255)
  • B - నీలి (0-255)
  • A - అల్ఫా చానల్ (0-255; 0 పారదర్శకం, 255 పూర్తి కనిపించేది)

color/alpha పొరలు ఏకమైన అంశంలో ఉన్నాయి మరియు ఇమేజ్‌డాటా అంబార్తులో నిల్వ చేయబడినవి: data అంశాల్లో.

ఉదాహరణ:

ఇమేజ్‌డాటా అంబార్తులోని మొదటి పిక్సెల్‌ను ఎరుపు రంగులో చేయడానికి విధానం:

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

ఇమేజ్‌డాటా అంబార్తులోని రెండవ పిక్సెల్‌ను హరిత రంగులో చేయడానికి విధానం:

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

సూచన:లుక్ చేయండి createImageData()మరియుgetImageData() మరియు putImageData() ఇమేజ్‌డాటా అంబార్తును గురించి ఎక్కువ తెలుసుకోవడానికి మార్గాలు.

ఉదాహరణ

100*100 పిక్సెల్స్ ఉన్న ఇమేజ్‌డాటా అంబార్తును సృష్టించండి అనే విధంగా పసిగా రంగు కలిగినది:

మీ బ్రౌజర్ కాన్వాస్ టాగ్‌ను మద్దతు చేయలేదు.

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;

బ్రౌజర్ మద్దతు

ఈ పట్టికలో ఇచ్చిన సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను పేర్కొన్నాయి.

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
4.0 9.0 3.6 4.0 10.1

ప్రకటనలు:Internet Explorer 8 మరియు అదే ముంది సంస్కరణలు <canvas> ఎలిమెంట్ నిర్లక్ష్యం చేయబడలేదు.

HTML5 Canvas సంపూర్ణ పరిశీలనాగారం