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

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

جاوااسکریپت:

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;

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

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

کروم Edge فایرفاکس سفاری اپرا
کروم Edge فایرفاکس سفاری اپرا
4.0 9.0 3.6 4.0 10.1

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

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