رسم الصور في رسم الشاشة في HTML5

يستخدم HTML5 Canvas drawImage() لرسم الصور، قبل رسم الصورة على اللوحة يجب إنشاء عميل Image، ثم تحميل الصورة إلى ذاكرة التخزين المؤقت.

يحتوي HTML5 Canvas على خيارات لرسم الصور عليه. يمكنك استخدام وظائف drawImage() من 2D سياق الـ Context لتنفيذ هذه العملية. هناك ثلاث وظائف مختلفة لـ drawImage():

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

المعلمات الأولى هي الصورة التي سيتم رسمها. سيناقش هذا النص لاحقاً كيفية إنشاء وتحميل الصورة.
dx و dy هي المعلمات القصيرة
في dw و dh هي المعلمات القصيرة
في معاملات sx و sy هي مؤقتة "sourceX" و "sourceY". هذه المعاملات تحدد من أي جزء من الصورة الأصلية تبدأ في نسخ المربع الصغير إلى اللوحة.
في معاملات sw و sh هي مؤقتة "sourceWidth" و "sourceHeight"

إنشاء وتحميل الصورة

قبل رسم الصورة على اللوحة، يجب إنشاء عنصر Image ثم تحميل الصورة إلى ذاكرة النظام. هذا هو الطريقة التي يتم بها باستخدام JavaScript:

صورة = جديد صورة();
صورة.مصدر = "https://ar.oldtoolbag.com/en/run/html/canvas-shot.png";

يجب أولاً تحميل الصورة بشكل كامل قبل أن يتم رسمها. لتحديد ما إذا كانت الصورة قد تم تحميلها بشكل كامل، قم بتعيين مستمع لحادثة على الصورة. سيتم استدعاء هذا المستمع عند تحميل الصورة. ويبدو كالتالي:

صورة.إضافة_المستمع('load', دالة_رسم_الصورة1);

مفصل_الرسم_الصورة1 هو دالة يتم استدعاؤها عند التفعيل.
هذا هو مثال كامل للكود يمكن إنشاءه، تحميل، ورسم الصورة على اللوحة:

نافذة.تحميل_الحدث = دالة() {
　　　　دالة_رسم_النموذج1();
}
صورة1 = null;
دالة_رسم_النموذج1() {
　　　　صورة1 = جديد صورة();
　　　　صورة1.مصدر =
　　　　　　　　"https://ar.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　صورة1.إضافة_المستمع('load', دالة_رسم_صورة1);
}
دالة_رسم_صورة1() {
　　　　اللوحة = وثيقة.الحصول_على_التعريف("ex1");
　　　　الرسام = اللوحة.getContext("2d");
　　　　الرسام.تصوير(صورة1, 10, 10);
}

هذا هو النتيجة للكود المذكور أعلاه عند رسم على اللوحة:

دعم رسم الشاشة في HTML5 غير مدعوم

تقسيم الصورة

كما ذكر في بداية هذا النص، يمكنك تقسيم الصورة أثناء رسمها. هذا مثال على كود يرسم الصورة ويقوم بتقسيمها إلى عرض 200 والارتفاع 100 بكسل:

عدد_العرض = 200;
عدد_الارتفاع = 100;
الرسام.تصوير(صورة2, 10, 10, عرض, طول);

هذا هو مظهر الصورة عند رسمها على اللوحة، مع عرض وأرتفاع مقاسين:

دعم رسم الشاشة في HTML5 غير مدعوم

رسم جزء من الصورة

يمكن رسم جزء من الصورة فقط على اللوحة. الجزء المرسم هو المربعاتي النسخ من الصورة. إليك مثال على الكود:

var dx = 10;
var dy = 10;
var dw = 75;
var dh = 75;
var sx = 20;
var sy = 20;
var sw = 75;
var sh = 75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

المساهمون هم sx،sy،sw وsh (يُنصح بتحديد sx،sy المربعاتي البداية) الصورة، وعرض المربعاتي (sw) وارتفاع المربعاتي (sh).

هذا هو مظهر الشكل المربعاتي للصورة عند رسمها على اللوحة:

دعم رسم الشاشة في HTML5 غير مدعوم