لوحة الرسم هي طريقة شائعة. من رسم جميع أنواع الرسومات على الشاشة ونقطة دخول إلى عالم WebGL. ويمكن استخدامه لرسم أشكال أو صور أو تشغيل رسوم متحركة أو حتى عرض محتوى الفيديو ومعالجته. وغالبًا ما يتم استخدامها لإنشاء تجارب مستخدم رائعة في تطبيقات الويب الغنية بالوسائط الألعاب عبر الإنترنت.
وهي قابلة للبرمجة، مما يعني أن المحتوى المرسوم على لوحة الرسم يمكن إنشاؤه برمجيًا، على سبيل المثال، في JavaScript. يمنح هذا اللوحة مرونة كبيرة.
في الوقت نفسه، على المواقع الإلكترونية الحديثة، يُعدّ تنفيذ النصوص البرمجية من العمليات الأكثر تكرارًا مصادر استجابة المستخدم. لأنّ منطق "لوحة الرسم" والعرض يحدثان في سلسلة المحادثات نفسها التي تتم أثناء تفاعل المستخدم، إنّ الحوسبة (الثقيلة أحيانًا) المستخدمة في الصور المتحركة يمكن أن تضرّر والأداء المتصور.
لحسن الحظ، يستخدم تطبيق OffscreenCanvas هو رد على هذا التهديد.
في السابق، كانت إمكانات رسم اللوحة مرتبطة بالعنصر <canvas>،
وهو ما يعني أنه كان يعتمد بشكل مباشر على نموذج كائن المستند (DOM). اللوحة خارج الشاشة، كما يوحي الاسم،
يفصل بين DOM وCanvas API من خلال نقله خارج الشاشة.
بفضل هذا الفصل، تم فصل عرض OffscreenCanvas تمامًا عن DOM لذلك توفر بعض تحسينات السرعة على لوحة الرسم العادية نظرًا لعدم وجود مزامنة بين الاثنين.
والأكثر من ذلك، هو أنّه يمكن استخدامها في Web Worker، على الرغم من عدم وجود نموذج DOM متوفّر. ويتيح ذلك جميع أنواع حالات الاستخدام المثيرة للاهتمام.
استخدام ميزة "لوحة الرسم خارج الشاشة" في إحدى العمال
العمال هي إصدار سلاسل المحادثات المتوفّر على الويب، فهي تتيح لك تشغيل المهام في الخلفية.
يؤدي نقل بعض النصوص البرمجية إلى أحد العمال إلى منح التطبيق مجالاً أكبر لأداء المهام بالغة الأهمية من جانب المستخدم المهام في سلسلة التعليمات الرئيسية. وبدون ميزة OffscreenCanvas، لم تكن هناك طريقة لاستخدام واجهة برمجة تطبيقات Canvas لدى العامل لم يكن DOM متاحًا.
لا تعتمد ميزة OffscreenCanvas على نموذج العناصر في المستند (DOM)، لذا يمكن استخدامها. يستخدم المثال التالي ميزة OffscreenCanvas لحساب لون التدرج في العامل:
// file: worker.js
function getGradientColor(percent) {
const canvas = new OffscreenCanvas(100, 1);
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, ctx.canvas.width, 1);
const imgd = ctx.getImageData(0, 0, ctx.canvas.width, 1);
const colors = imgd.data.slice(percent * 4, percent * 4 + 4);
return `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`;
}
getGradientColor(40); // rgba(152, 0, 104, 255 )
إزالة حظر سلسلة المحادثات الرئيسية
يتيح لك نقل العملية الحسابية الثقيلة إلى عامل توفير الموارد المهمة في سلسلة التعليمات الرئيسية استخدام transferControlToOffscreen لمحاكاة لوحة الرسم العادية على مثيل OffscreenCanvas. العمليات المطبقة على سيتم عرض لوحة الرسم خارج الشاشة على لوحة الرسم المصدر تلقائيًا.
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({canvas: offscreen}, [offscreen]);
في المثال التالي، تحدث العملية الحسابية الثقيلة عندما يتغير مظهر اللون - يجب أن ويستغرق بضعة ثوانٍ حتى على جهاز سطح مكتب سريع. يمكنك اختيار تشغيل الصور المتحركة في سلسلة التعليمات الرئيسية. أو في العامل. في حالة وجود سلسلة التعليمات الرئيسية، لا يمكنك التفاعل مع الزر أثناء الضغط على قيد التشغيل - تم حظر سلسلة المحادثات. في حالة العامل، لا يكون هناك تأثير على سرعة استجابة واجهة المستخدم.
وهي تعمل بطريقة أخرى أيضًا: لا تؤثر سلسلة التعليمات الرئيسية المشغولة على الرسوم المتحركة التي تعمل على عامل. يمكنك استخدام هذه الميزة لتجنُّب تعطّل المرئيات وضمان عرض صورة متحركة سلسة. على الرغم من الزيارات إلى سلاسل المحادثات الرئيسية، كما هو موضّح في العرض التوضيحي التالي.
في حالة اللوحة العادية، تتوقف الرسوم المتحركة عندما يزداد عمل سلسلة التعليمات الرئيسية بشكل مصطنع، بينما تعمل ميزة OffscreenCanvas المستندة إلى العمال بسلاسة.
الاستخدام مع المكتبات الرائجة
بما أنّ واجهة OffscreenCanvas API متوافقة بشكل عام مع عنصر لوحة الرسم العادي، يمكنك استخدامه كتحسين تدريجي، وأيضًا مع بعض مكتبات الرسومات الرائدة في السوق.
على سبيل المثال، يمكنك اكتشاف الميزات، وإذا كان متاحًا، استخدمها مع Three.js من خلال تحديد خيار ملء الشاشة في الدالة الإنشائية للعارض:
const canvasEl = document.querySelector('canvas');
const canvas =
'OffscreenCanvas' in window
? canvasEl.transferControlToOffscreen()
: canvasEl;
canvas.style = {width: 0, height: 0};
const renderer = new THREE.WebGLRenderer({canvas: canvas});
والمشكلة هنا هي أن Three.js يتوقع أن يكون للوحة الرسم خاصية style.width وstyle.height.
وبما أنّ ميزة OffscreenCanvas منفصلة تمامًا عن نموذج العناصر في المستند (DOM)، لا تتوفّر هذه الميزة، لذا عليك تقديمها بنفسك.
إما عن طريق إزالتها أو تقديم منطق يربط هذه القيم بالأصل
أبعاد اللوحة.
يوضح ما يلي كيفية تشغيل رسم متحرك أساسي من نوع Three.js في أحد العاملين:
ويجب أن تضع في اعتبارك أن بعض واجهات برمجة التطبيقات المتعلقة بنموذج DOM غير متاحة بسهولة لدى أي عامل، لذا إذا إذا كنت تريد استخدام ميزات Three.js أكثر تقدمًا مثل الزخارف، فقد تحتاج إلى مزيد من الحلول. للاطّلاع على بعض الأفكار حول كيفية البدء بتجربة هذه الأشياء، ألقِ نظرة على فيديو من مؤتمر Google I/O لعام 2017.
إذا كنت تستفيد من القدرات الرسومية للوحة الرسم، يمكنك استخدام OffscreenCanvas بشكل إيجابي في أداء تطبيقك. زيادة إتاحة سياقات عرض لوحات الصور المطبوعة للعاملين التوازي في تطبيقات الويب والاستفادة بشكل أفضل من الأنظمة متعددة النواة.