Canvas data خاصیت

Canvas ਪ੍ਰਸਤੁਤੀ

تعریف اور استعمال

data خصوصیت ایک اکائی واپس دیتا ہے، جس میں مخصوص ImageData اکائی کی تصویری اعداد و شمار شامل ہیں。

ImageData اکائی کے ہر پکسل میں چار جہات کی معلومات موجود ہیں، یعنی RGBA کا قیمتی:

  • 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 ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ。

ਜਾਵਾਸਕ੍ਰਿਪਟ:

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> ਐਲੀਮੈਂਟ ਨਹੀਂ ਸਮਰਥਤ ਹਨ。

Canvas ਪ੍ਰਸਤੁਤੀ