ویژگی داده‌های کانواس HTML

دستورالعمل‌های کانواس HTML5

تعریف و استفاده

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 پیکسلی ایجاد کنید، که هر پیکسل آن به رنگ قرمز تنظیم شده باشد::

مرورگر شما برچسب canvas را پشتیبانی نمی‌کند.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
برای (تغییرات 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

توجه:اینترنت اکسپلورر 8 و نسخه‌های قدیمی‌تر از عنصر <canvas> پشتیبانی نمی‌کنند.

دستورالعمل‌های کانواس HTML5