HTML ਕੈਂਵਾਸ data ਵਿਸ਼ੇਸ਼ਤਾ

HTML5 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 ਆਬਜੈਕਟ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਹਰ ਪਿਕਸਲ ਲਾਲ ਰੰਗ ਵਿੱਚ ਰਿਹਾ ਹੋਵੇ: :

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ ਕੈਂਵਾਸ ਟੈਗ ਦੀ ਸਹਾਇਤਾ ਨਹੀਂ ਕਰਦਾ ਹੈ。

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 ਸੰਦਰਭ ਮੁੱਲਾਂ