تقوم طريقة getImageData () بإرجاع كائن ImageData، الذي ينسخ بيانات البكسل الخاصة بالمستطيل المحدد في اللوحة القماشية.
ملاحظة: كائن ImageData ليس صورة، فهو يحدد جزءًا (مستطيلًا) من اللوحة القماشية ويحفظ معلومات كل بكسل داخل المستطيل.
لكل بكسل في كائن ImageData، هناك أربعة جوانب من المعلومات، وهي قيمة RGBA:
أ - قناة ألفا (0-255؛ 0 شفاف، 255 مرئي بالكامل)
توجد معلومات اللون/ألفا في شكل مصفوفة ويتم تخزينها في سمة البيانات الخاصة بكائن ImageData.
نصيحة: بعد العمل على معلومات اللون/ألفا في المصفوفة، يمكنك استخدام طريقة putImageData() لنسخ بيانات الصورة مرة أخرى إلى اللوحة القماشية.
رمزان <!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html; charset=GBK /> <title> تغيير الشفافية</title></head><body><h2> تغيير الشفافية</h2><canvas id=mc width=600 height=460 style=border:1px Solid black></canvas><script type=text/javascript> // احصل على كائن DOM المطابق لعنصر قماش var Canvas = document.getElementById('mc'); // احصل على كائن CanvasRenderingContext2D للرسم على قماش var ctx = Canvas.getContext('2d'); var image = new Image(); استخدم الطريقة مع معلمات الشفافية لرسم الصورة drawImage(image, 124, 20, 0.4) } var drawImage = function(image, x, y, alpha) { // ارسم الصورة ctx.drawImage(image, x, y) ); // احصل على بيانات الصورة بدءًا من x وy بعرض image.width وارتفاع image.height // أي الحصول على بيانات الصورة المرسومة var imgData = ctx.getImageData(x, y, image.width, image.height); for (var i = 0, len = imgData.data.length; i < len; i += 4) { // تغيير شفافية كل بكسل imgData.data[i + 3] = imgData.data[i + 3] * alpha } // أعد بيانات الصورة التي تم الحصول عليها. ctx.putImageData(imgData, x, y); ثلاث نتائج تشغيلما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.