أحدث البرامج التعليمية وتطوير الشبكة
 

HTML canvas ImageData data Propery

<كائن قماش

مثال

إنشاء كائن ImageData 100 * 100 بكسل حيث يتم تعيين كل بكسل إلى اللون الأحمر:

قماش

YourbrowserdoesnotsupporttheHTML5canvastag.

جافا سكريبت:

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);
انها محاولة لنفسك »

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.

خاصية
data 4.0 تسعة 3.6 4.0 10.1

تعريف والاستخدام

الخاصية البيانات بإرجاع الكائن الذي يحتوي على بيانات صورة الكائن ImageData المحدد.

لكل بكسل في كائن ImageData هناك أربع قطع من المعلومات والقيم RGBA:

R - اللون الأحمر (from 0-255)
G - اللون الأخضر (from 0-255)
B - اللون الأزرق (from 0-255)
أ - قناة ألفا (from 0-255; 0 is transparent and 255 is fully visible)

ويعقد معلومات اللون / ألفا في مجموعة، ويتم تخزين البيانات في خاصية الكائن ImageData.

Examples:

بناء الجملة من أجل جعل بكسل الأول في 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;

Tip: انظروا createImageData() ، getImageData() ، و putImageData() لمعرفة المزيد حول الكائن ImageData.

جافا سكريبت بناء الجملة

جافا سكريبت بناء الجملة: imageData .data.
<كائن قماش