أحدث البرامج التعليمية وتطوير الشبكة
 

HTML canvas createImageData() Method

<كائن قماش

مثال

إنشاء كائن ImageData 100 * 100 بكسل حيث كل بكسل الأحمر، ووضعها على قماش:

YourbrowserdoesnotsupporttheHTML5canvastag.

جافا سكريبت:

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);
انها محاولة لنفسك »

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.

طريقة
createImageData() 4.0 تسعة 3.6 4.0 10.1

تعريف والاستخدام

و createImageData() طريقة يخلق، وجوه ImageData فارغ جديد. قيم بكسل وجوه جديدة هي الأسود الشفاف افتراضيا.

لكل بكسل في كائن ImageData هناك أربع قطع من المعلومات والقيم RGBA:

R - اللون الأحمر (from 0-255)
G - اللون الأخضر (from 0-255)
B - اللون الأزرق (from 0-255)
أ - قناة ألفا (from 0-255; 0 is transparent and 255 is fully visible)

لذلك، يشير أسود شفاف: (0,0,0,0) .

ويعقد معلومات اللون / ألفا في صفيف، ومنذ مجموعة تحتوي على 4 قطع من المعلومات لكل بكسل، حجم المصفوفة هو 4 أضعاف حجم الكائن ImageData: العرض * الارتفاع * 4. (أسهل طريقة للعثور على حجم المصفوفة، هو استخدام ImageDataObject.data.length)

يتم تخزين مجموعة يحتوي على معلومات اللون / ألفا في البيانات خاصية الكائن ImageData.

Tip: بعد أن كنت قد تلاعبت معلومات اللون / ألفا في مجموعة، يمكنك نسخ بيانات الصورة مرة أخرى على قماش مع putImageData() الأسلوب.

Examples:

بناء الجملة من أجل جعل بكسل الأول في 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() الأسلوب:

1. هذا يخلق كائن ImageData جديد مع الأبعاد المحددة (بالبكسل):

جافا سكريبت بناء الجملة: فار imgData = context . createImageData( width,height ) .

2. وهذا يخلق كائن ImageData جديد مع نفس الأبعاد ككائن المحدد من قبل anotherImageData (this does not copy the image data) :

جافا سكريبت بناء الجملة: فار imgData = context . createImageData( imageData ) .

قيم معلمة

معامل وصف
width عرض الكائن ImageData الجديد، بالبكسل
height ارتفاع الكائن ImageData الجديد، بالبكسل
imageData الكائن anotherImageData
<كائن قماش