طريقة putImageData() في شريط الرسم HTML

دليل مرجعي كانفاس HTML5

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

putImageData() الطريقة تعيد بيانات الصورة إلى الشريط الرسمي.

نصيحة:انظر إلى getImageData() الطريقة، التي يمكن نسخ بيانات بكسل في شريط الرسم المحدد.

نصيحة:انظر إلى createImageData() الطريقة، التي يمكن إنشاء ImageData الجديدة الفارغة.

مثال

هذه الكودس تكرر بيانات بكسل في شريط الرسم المحدد، ثم تعيد بيانات الصورة إلى الشريط الرسمي من خلال putImageData():

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

جرب بنفسك

اللغة

سياق.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

قيمة المتغير

المتغيرات وصف
imgData يحدد ImageData الذي يجب وضعها على لوحة الرسوم.
x الordinate x اليسرى الأعلى لـ ImageData بالبكسل.
y الordinate y اليسرى الأعلى لـ ImageData بالبكسل.
dirtyX اختياري. القيمة الأفقية (x) بالبكسل، مكان وضع الصورة على لوحة الرسوم.
dirtyY اختياري. القيمة الأفقية (y) بالبكسل، مكان وضع الصورة على لوحة الرسوم.
dirtyWidth اختياري. العرض المستخدم في رسم الصورة على لوحة الرسوم.
dirtyHeight اختياري. الارتفاع المستخدم في رسم الصورة على لوحة الرسوم.

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الذي يدعم الخاصية لأول مرة.

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

ملاحظة:لا يدعم متصفح Internet Explorer 8 وأحدث إصداراته عنصر <canvas>.

دليل مرجعي كانفاس HTML5