خصائص HTML canvas data

دليل مرجعي HTML5 Canvas

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

data الخصائص تعود دالة تحتوي على دالة ImageData المطلوبة من البيانات الصور.

للبكسل في دالة ImageData، هناك معلومات أربعة الجوانب، وهي قيم RGBA:

  • R - الأحمر (0-255)
  • G - الأخضر (0-255)
  • B - الأزرق (0-255)
  • A - قناة الألفا (0-255; 0 هو شفاف، 255 هو مرئي بالكامل)

موجود في شكل دالة مرتبة بالعدد، ويتم تخزينها في دالة 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.

مثال

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

متصفحك لا يدعم علامة الكanvas.

جافا سكربت:

دولـة c=document.getElementById("myCanvas");
دولـة ctx=c.getContext("2d");
دولـة imgData=ctx.createImageData(100,100);
لـ (فار 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 Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

ملاحظة:لا يدعم متصفح Internet Explorer 8 وأحدث إصداراته عنصر <canvas>.

دليل مرجعي HTML5 Canvas