شرح تفصيلي لمشكلة عدم عرض طريقة رسم اللوحة القماشية () للصورة المرسومة

يحتوي Canvas على واجهة برمجة تطبيقات قوية جدًا تسمى drawImage() (w3c):

وتتمثل مهمتها الرئيسية في رسم الصور ومقاطع الفيديو وحتى اللوحات الأخرى.

لقد جاء إلى هنا في حالة إعجاب، لكنه أخطأ الهدف عندما خفض رأسه، رأى حفرة كبيرة على الأرض.

الأمر على هذا النحو، بعد أن قرأت مقدمة w3c والعرض التوضيحي المقنع والتعليمي للغاية، قررت تجربتها بناءً على فكرة التدرب لاكتساب المعرفة الحقيقية جربه ~

لقد حددت المهام الأساسية التالية وفقًا لمشروع خط التجميع:

1. علامة قماش + معرف

 <معرف القماش=canvas1></canvas>

2. احصل على قماش + ضبط العرض والارتفاع

 var cav1 = document.getElementById('canvas1'), wWidth = 800, wHeight = 600; cav1.width = wWidth;

3. يقوم getContext('2d') بإعداد اللوحة القماشية

 var ctx1 = cav1.getContext('2d');

4. قم بإنشاء كائن Image() جديد وأعطه سمات الصور التي أحبها... (لا تفكر كثيرًا)

 var bgImg = new Image();bgImg.src = 'images/background.jpg';

5. أخيرًا حان وقت الرسم. لقد كتبت هذا الرمز بحماس:

 ctx1.drawImage(bgImg,0,0,wWidth,wHeight);

شعرت بالارتباك، وقمت بالضغط على F5 في المتصفح.

ثم ساد الصمت القاتل..

اعتقدت أن الكود مكتوب بشكل خاطئ، لذلك عدت وفحصته بعناية، وكان صحيحًا.

انسخ أسماء السمات الرئيسية وأساليب w3c وتحقق مرة أخرى من صحتها بالفعل.

عندما تتم طباعة الصورة، هناك أيضًا هذه الصورة (للشخص)!

لاحقًا، عندما لاحظت حالة W3C، كان الاختلاف عن الكود الخاص بي هو أن صوره موجودة بتنسيق HTML.

ثم تعلمت كيفية إدراج الصور في HTML،

 <img src=./images/background.jpg id=imgs style=display:none></img>

واستخدم getElementById للحصول على هذا العنصر،

 فار bgImg = document.getElementById('imgs')

نجح تنفيذ الرسم مرة أخرى.

في الواقع يستطيع!

أعتقد للأسف، هل يجب أن يكون جسديًا؟ أليست موضوعة فقط أمام علامة اللوحة القماشية؟ يحتوي تحميل js أيضًا على كيانات، وما زلت أستخدم كيانات جديدة، كم هي مختلفة عن الأشخاص الحقيقيين!

هذا صحيح، أليست موضوعة فقط في المقدمة؟ وهذا ينطوي على مشكلة تسلسل!

صحيح أن الصورة المحملة في js يتم وضعها أمام الرسم، لكن تحميل الصورة سيستغرق بعض الوقت. يجب إعطاء الوقت للتخزين المؤقت للصورة. انتظر حتى يتم تحميل الصورة بنجاح قبل أن تتمكن من رسمها. لن يتم استدعاء الأسلوب drawImage عند استخدام الصورة قبل تحميلها. سوف يفشل الرسم أرى!

هل يجادل بعض الأشخاص بأن الصور الموجودة في علامات img لا تستغرق وقتًا للتحميل؟ في هذا الوقت لا يقتصر drawImage؟ ! لكن لا تتجاهل window.onload في بداية js. حتى لو تم تحميل الصورة ببطء، حتى لو كان ترتيب علامات الصورة بعد علامة اللوحة القماشية، ولكن لدي window.onload تغطيتها، فلا يمكن أن تكون الصورة الخاصة بي. تحميلها، وسوف drawImage الخاص بك أي فرصة، أليس كذلك؟

الترتيب التقريبي هو هذا:

 <img src=>window.onload = function(){ drawImage}

إذا لم يتم إدراج الصورة في بنية html، فسيتم تجاوز هذا القيد بسبب إهمالي:

عندما يتم طلب صورة كمورد وتحميلها في js، سيكون هناك بطبيعة الحال وقت تحميل للصورة.

ولكن نظرًا لعدم وجود حد، في معظم الحالات يتم استدعاء drawImage عندما لا يتم تحميل الصورة، ولن تعمل هذه الطريقة.

فهل هناك طريقة جيدة لحل مشكلة فشل رسم drawImage بسبب تسلسل تحميل الصورة؟

لقد قمت بتلخيص الطرق الثلاثة التالية:

 <img src=>window.onload = function(){ context.drawImage()}

الحل الأساسي لهذا الأسلوب هو التحميل، الذي يقوم بتحميل الصورة ورسم الصورة بشكل منفصل أولاً لضمان استخدام الرسم بعد اكتمال التحميل.

أحد المواقف هو أنه عند استخدام وظيفة لقطة الشاشة، يمكنك أيضًا استخدام drawImage، ولا تلتقط لقطة الشاشة لقطة شاشة لصورتك الحالية، ولكنها تستخدم عنوان الصورة كمعلمة.

أعتقد أن هذا النوع من الأشياء يتطلب من js إنشاء صورة وتعيين العنوان لها ثم إنشاء الصورة والتقاط لقطة شاشة.

 var myImg = document.createElement('img');myImg.src = '///';document.body.appendChild(myImg);ctx1.drawImage(myImg,0,0,wWidth,wHeight);

لا تريد إضافة علامات إضافية؟ هل أحتاج إلى استخدام js كما هو موضح أدناه لإنشاء كائن صورة جديد؟

 var bgImg = new Image();bgImg.src = 'images/background.jpg';

كما ذكرنا سابقًا، يتطلب هذا النوع من الصور التي تم إنشاؤها باستخدام new Image() وقتًا لتخزين الصورة مؤقتًا. انتظر حتى يتم تحميل الصورة بنجاح قبل أن تتمكن من رسمها.

كائن الصورة جاهز، ولكن كيف يمكنك معرفة متى تم تحميل الصورة بالفعل؟ حسنًا، هناك طريقة أخرى:

أثناء تنفيذ مهمة js، هل تعتقد أنني قريب جدًا من وقت التنفيذ الخاص بك، هل يمكنك إخراجي بمفردي ووضعي في قائمة الانتظار مرة أخرى، ثم تنفيذها مرة أخرى لاحقًا؟

 setTimeout(function(){ ctx1.drawImage(bgImg,0,0,wWidth,wHeight);},10)

لماذا التأخير في كتابة 10 هنا بدلا من 1000 أو 0 المألوفة؟

لأنه في ظل اختبار بيئة wifi المحددة وجهاز كمبيوتر سطح المكتب المحدد، يمكن أن يظهر 10 بعد تحميل الصورة، على عكس 0 الذي لا يظهر، ولا أريد الانتظار لمدة نصف يوم مثل 1000.

لكن تخيل لو قمت بتغيير الصورة إلى صورة أكبر، فهل ستظل هذه العشرة سارية؟ هل سيظل هذا الرقم 10 ساريًا إذا تم تغيير شبكة wifi إلى 2 جيجا؟

لذلك، فإن عيب المؤقت هو أنه لا يوجد ضمان بأنه سيتم تحميل الصورة بعد انتهاء الوقت، وإذا لم تكن الشبكة سريعة، فستظل معلقة.

window.onload يعطينا فكرة ألا يمكننا مراقبة اكتمال التحميل مباشرة؟

استخدم حدث تحميل img لمراقبة التحميل الناجح للصورة، ثم تنفيذ تأثير رسم اللوحة القماشية، وهذه الطريقة أكثر موثوقية.

 bgImg.onload = function(){ console.log('تم تحميل الصورة بنجاح'); ctx1.drawImage(bgImg,0,0,wWidth,wHeight });

في الواقع، هذه الطرق الثلاث جميعها لها نفس الجوهر، وهو السماح بتحميل الصورة أولاً. وهذا هو، التحميل المسبق للصورة. ولكن بالنسبة للصور المخزنة مؤقتًا، يحتاج التحميل المسبق للصور أيضًا إلى حل مشكلة مراقبة الصور المخزنة مؤقتًا عندما لا يتم تحديث الصفحة.

وجدت مشكلة أخرى. . . . أولاً، إليك ما تبدو عليه لوحة الخلفية بعد الانتهاء منها.

ثم ظهرت صورة الخلفية أخيرًا، وتابعت بسعادة.

لذلك قمت على الفور برسم خط أحمر لتجنب عدم رؤيته، وقمت أيضًا بزيادة العرض إلى 20:

 bgImg.onload = function(){ ctx1.drawImage(bgImg,0,0,wWidth,wHeight); } /* ارسم الخط الأحمر كما يلي: */ ctx1.beginPath(); ctx1.lineTo (10,wHeight-100); ctx1.lineWidth = 20; ctx1.strokeStyle = 'red'; ctx1.stroke();

ولكن عندما أضغط على F5، لا يوجد أي تغيير، وما زلت لا أستطيع رؤية الخط الأحمر.

وبعد البحث لفترة طويلة لم أرها حتى قمت بإيقاف صورة الخلفية:

آه، اتضح أنه كان مغطى بصورة الخلفية!

لكن لماذا؟

أعتقد أن هناك احتمالين

1. قضايا التسلسل الهرمي

2. قضايا التسلسل

فيما يتعلق بالرقم 1، يبدو الأمر وكأنه مؤشر z لـ CSS، حيث تغطي صورة الخلفية الخط الأحمر. هل يمكن أن يكون مستوى صورة الخلفية أعلى من الخط الأحمر؟

لم يكن لدي أي وسيلة لاختبار هذه الفرضية، لذلك تخليت عن الكشف المحتمل الثاني.

ولكن لماذا صورة الخلفية في الأعلى؟ هل لأنه تم رسم صورة الخلفية لاحقًا؟

يمكن ملاحظة ذلك بسهولة من خلال طباعة console.log() لمراقبة تسلسل التنفيذ.

اتضح أن الجاني هو رد الاتصال عند التحميل. مثل الموقت، فهي مهمة غير متزامنة. وبطبيعة الحال، يتم تصنيفها خلف مهمة المزامنة (رسم الخطوط أدناه)

لذا يبدو أن التحميل حل جيد، لكن عيوبه تظهر هنا أيضًا.

جيد جدًا، يبدو أنه يجب وضع خطة التعلم الواعدة في الجدول الزمني في أقرب وقت ممكن! هاهاها

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.