روش createImageData() کانواس HTML

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

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

createImageData() روش ایجاد ImageData جدید خالی. ارزش پیش‌فرض پیکسل‌های جدید سیاه شفاف است.

برای هر پیکسل ImageData، چهار نوع اطلاعات وجود دارد، به نام RGBA ارزش‌ها:

  • R - قرمز (0-255)
  • G - سبز (0-255)
  • B - نیل (0-255)
  • A - آلفا چنل (0-255; 0 شفافیت کامل دارد، 255 کاملاً قابل مشاهده است)

因此 ，transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 ImageData 对象的四倍。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 data پرزئرتی میں.

تذکراً:نویشکار کا کولر/آلفا معلومات کا آرائی کریئن کے بعد، آپ کا استعمال کرسکتا ہے putImageData() یہ میتھد تصویر کا میٹا ڈاٹا کاپی پر کینواس پر رکھتی ہے.

مثال:

یہ نویشکار کوئی میٹا ڈاٹا آئیتم کا پہلا پیکسل قرمز رنگ بنادیا ہے:

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

یہ نویشکار کوئی میٹا ڈاٹا آئیتم کا دوسرا پیکسل قرمز رنگ بنادیا ہے:

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

مثال

ایک 100*100 پیکسل کا اوشیو میٹا ڈاٹا آئیتم بنائیں، جس میں ہر پیکسل قرمز رنگ کا ہوگا، اور اس کو کینواس پر رکھیئن:

آپ کا براوزر ایچٹی-5 کا کینواس تگ نہیں سپورٹ کرتا.

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

برائے c=document.getElementById("myCanvas");
برائے ctx=c.getContext("2d");
برائے 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);

آپ خود چاہیئیں کچھ کریئٹ کریئن

نویشکار

کوئی کاٹجیوکری ایکریئٹ اپرائیو میتھد تھی:

1. ایجاد یک ImageData جدید با اندازه مشخص شده (به صورت پیکسل):

var imgData=context.createImageData(width,height);

2. ایجاد یک ImageData جدید با اندازه مشخص شده (بدون کپی کردن داده‌های تصویر):

var imgData=context.createImageData(imageData);

مقدار پارامتر

پارامتر توضیح
width عرض ImageData به صورت پیکسل.
height ارتفاع ImageData به صورت پیکسل.
imageData یک ImageData دیگر.

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

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

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

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

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