خصائص Canvas data

دليل مرجعي لـ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 بكسل، حيث يتم تعيين كل بكسل إلى اللون الأحمر::

البرنامج التشغيلي الخاص بك لا يدعم علامة الرسام.

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;

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

دليل مرجعي لـCanvas