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

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

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

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;

پشتیبانی مرورگر

تعداد در جدول نشان‌دهنده نسخه مرورگر اولیه‌ای است که این ویژگی را کاملاً پشتیبانی می‌کند.

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

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

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