بسم الله الرحمن الرحيم
بداية آسف على تأخري في طرح هذا الجزء، وذلك بسبب الضغط الكبير في الفتره الماضية، و بسبب الوقت الطويل الذي إستغرقه كتابة الدرس.
======================
قبل أن أبدأ الحديث عن ال Canvas في ال HTML5، سوف أتطرق بشكل مقتضب إلى ميزتان جديدتان في ال HTML5. بل هما من أبرز الميزات الجديده التي تم الحديث عنها. وهي إمكانية تضمين ملفات الصوت و الفيديو بشكل مباشر في صفحة الويب، بدون الحاجة إلى وسوم مساعدة أو إضافات أخرى.
<Audio> <Video>
بإستخدام كل من الوسم Audio و Video أصبح بإمكاننا وضع ملفات الصوت و الفيديو داخل صفحات الويب بشكل مباشر بدون الحاجة لإستخدام الوسم embed مثلا أو غيرها.
مثال:
<audio src="SoundTrack.mp3" controls="controls"> Your browser does not support the audio element. </audio>
هنا قمنا بإستخدام الوسم audio من أجل تضمين الملف SoundTrack.mp3 (الخاصية src تمثل مسار و إسم الملف المراد تشغيله) في صفحة الإنترنت بشكل مباشر. لاحظ أن النص الذي وضعناه بين وسم البداية و النهاية سوف يظهر في المتصفحات التي لا تدعم هذا الوسم.
لاحظ أيضا أننا أعطينا الخاصية controls القيمة controls ما يعني أنه سوف تظهر عناصر التحكم الخاصة بمشغل الموسيقى في صفحة الإنترنت.
هنالك العديد من الخصائص الأخرى أيضا التي يأخذها الوسم audio مثل autoplay، preload...
<video src="movie.ogg" controls="controls"> your browser does not support the video tag </video>
في هذا الكود قمنا بإستخدام الوسم video من أجل تضمين الملف movie.ogg (الخاصية src تمثل مسار و إسم الملف المراد تشغيله) في صفحة الإنترنت بشكل مباشر. أيضا النص الذي وضعناه بين وسم البداية و النهاية سوف يظهر في المتصفحات التي لا تدعم هذا الوسم.
لاحظ كذلك أننا أعطينا الخاصية controls القيمة controls ما يعني أنه سوف تظهر عناصر التحكم الخاصة بمشغل الفيديو (هذا المشغل سوف يكون خاص بالمتصفح وليس مشغل فلاش كما إعتدنا) في صفحة الإنترنت.
هنالك العديد من الخصائص الأخرى أيضا التي يأخذها الوسم video بعضها شبيه بخصائص الوسم audio مثل autoplay، preload، وبعضها جديد مثل loop، height، width...
هنالك الكثير من الحديث حول Codecs الصوت و الفيديو المدعومة في HTML5 و في بعض المتصفحات و غير مدعومة في بعضها، ولكن لن نتطرق لهذا الحديث الطويل و سوف أكتفي بما تم ذكره (بالإمكان مناقشة الموضوع في الردود).
دعنا ننتقل في هذا الجزء، للحديث عن موضوع مختلف قليلا (ولكن في نفس السياق)، وهو الوسم canvas.
في ال HTML5 ظهرت لدينا العديد من الوسوم التي تساعدنا على إنجاز المهمات بشكل سريع ومريح و مضبوط بشكل جيد، أحد أهم هذه التقنيات التي ظهرت في ال HTML5 هي تقنية "لوح الرسم" أو كما تسمى في ال HTML5 "وسم ال canvas"؛ طبعا في النهاية كلمة canvas تعني لوح الرسم.
حسنا، ربما الوظيفة واضحه و جليه من الإسم، حيث يتيح لنا وسم canvas لوحة في صفحة ال HTML5 بإمكاننا رسم أي شيئ عليها. عندما نتحدث عن رسم أي شيئ فنحن نتحدث عن Graphics من خلال الكود و المعادلات الرياضية، وليس مجرد صور تقوم برسمها. طبعا هذه المهمة كانت صعبة جدا (ربما شبه مستحيلة) في نسخ ال HTML السابقة، حيث كان بإمكاننا أن نقوم بوضع صورة في خاصية ال background لأحد الوسوم في النسخ السابقة، ولكن لم يكن بإمكاننا أن نقوم برسم رسومات جرافيكية من خلال الكود و المعادلات الخاصه بها، على صفحة ال HTML(ربما كان هنالك بعض الطرق المتعرجة التي من خلالها نقوم بذلك).
حسنا إذا كنت من المهتمين بموضوع الرسم الحاسوبي و خوارزمياته، و برمجة و تصميم الألعاب، فهذه هي حصتك في ال HTML5 (وهي ليست بالحصة القليلة:)).
كما قلت سابقا فإن ال canvas في ال HTML5 هي مجرد لوح رسم، ما يعني أنك لن تقوم برسم الأشكال داخل ال canvas من خلال الوسوم، إنما سوف تحتاج لإستخدام ال JavaScript لذلك.
إذا لنبدأ بكتابة الوسم في صفحة ال HTML لكي نحصل على canvas فارغة.
<canvas id="myCanvas" border="1" width="300" height="225"> Alternative Text </canvas>
سوف نستخدم ال id داخل ال JavaScript من أجل الوصول إلى هذه ال canvas و الرسم عليها. النص المكتوب بين وسم البداية و النهاية، هو النص البديل الذي يظهر في حال كانت المتصفحات لا تدعم ال canvas.
نتيجة هذا الكود، سوف يكون مستطيل أبيض بحجم (300*225 بكسل) على الصفحة تمثل مساحة الرسم. قمت بإستعمال الخاصية border من أجل وضع حد حول هذا المستطيل (قد لا ترى الحد إلا في ال Opera). جدير بالذكر أيضا أنه بالإمكان وضع أي عدد من لوحات الرسم في الصفحة الواحدة.
لنبدأ بالجافا سكربت الذي سوف يقوم بعمليات الرسم على ال canvas، بإمكانك وضع الكود التالي في أي مكان تريد (حسب قواعد الجافا سكربت):
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function draw() {
var myCanvas = document.getElementById("myCanvas");
var myContext = myCanvas.getContext("2d");
myContext.fillRect(10, 20, 200, 250);
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" border="1" width="300" height="300">
Alternative Text
</canvas>
</body>
</html>لاحظ أنه يتم إستدعاء الكود في الحدث load للصفحة.
var myCanvas = document.getElementById("myCanvas");
كل ما يقوم به هذا السطر هو الإمساك بكائن ال DOM الخاص بال canvas، حيث سوف يصبح بإمكاننا الرسم عليها و التعامل مع خصائصها.
var myContext = myCanvas.getContext("2d");
وظيفة هذا السطر هي الإمساك بما يسمى بال context الخاص بلوح الرسم، حيث يحتوي كائن ال context على كل الدوال “methods” و الخصائص “Properties” التي تلزم في عملية الرسم. لاحظ أننا مررنا قيمة نصية للدالة getContext للدلالة على أن لوح الرسم الخاص بنا هو ثنائي الأبعاد. إذا كنت سوف تسأل هل يوجد لوح رسم ثلاثي الابعاد في ال HTML5 الجواب بشكل سريع هو لا أو بالأصح ليس بعد!! هنالك العديد من المحاولات لعمل ذلك، لكن أي منها لم يعتمد كمعيار من قبل ال W3C بعد.
myContext.fillRect(10, 20, 200, 250);
الدالة fillRect تقوم بمهمة الرسم على اللوح. حيث يتم رسم مربع أسود يبدأ من الإحداثي 10 في الX و 20 في ال Y و يمتد حجم هذا المربع إلى 200 في العرض و 250 في الطول. يذكر ان هنالك العديد من الدوال التي تستخدم لرسم المربعات في ال HTML5 سوف يتم الإشارة إليها.
بكل الأحوال، عند تنفيذ هذا الكود سوف نحصل على النتيجة التالية، هذه الصورة مأخوذة من متصفح أوبرا 10.5:
هل يعجبك اللون الأسود؟؟ إذا كانت إجابتك نعم، فإجابتي لا.
إذا دعنا نغير هذا اللون بلون آخر، وذلك من خلال إضافة السطر التالي قبل السطر المسؤول عن عملية الرسم.
myContext.fillStyle='#FF7700’;
ها قد حصلنا على بعض اللون البرتقالي في مربعنا. حيث من الواضح أن الخاصية fillStyle تقوم بتحديد لون التعبئة التي سوف يتم إستخدامها في عمليات الرسم في ال Context الحالي. لاحظ أيضا أن قيمة اللون مكتوبة على نمط ال CSS. أيضا إضافة إلى اللون بإمكاننا إعطاء الخاصية fillStyle تدرج لوني أو حتى نقش.
لنرجع إلى دوال رسم المربعات. في ال HTML5 لدينا العديد من الدوال التي نستخدمها لرسم المربعات:
• fillRect(x, y, width, height)
قمنا بإستخدام هذه الدالة من أجل رسم مربع مصمت باللون الذي تم تحديده من خلال الخاصية fillStyle. حيث يتم رسم مربع تبدأ زاويته العليا اليمنى في الإحداثي X,Y، و عرض هذا المربع يتمثل بالقيمة width، و إرتفاعه يتمثل بالقيمة Height.
• strokeRect (x, y, width, height)
الفرق بين هذه الدالة و سابقتها، هو أن في هذه الدالة يتم رسم مربع حدود بدون تعبئته بأي لون. طبعا سوف نحتاج إلى خاصية من أجل وضع لون حدود هذا المربع. هذه الخاصية هي strokeStyle ويتم التعامل معها بنفس الطريقة في ال fillStyle. كما قلنا أيضا من الممكن أن تحمل هذه الخاصية قيمة لون، تدرج لوني أو نقش.
• clearRect (x, y, width, height)
مهمة هذه الدالة هو عمل مسح لمنطقة مربعة معينة باللون الأبيض. طبعا يتم تحديد هذه المنطقة بناء على إحداثيات X,Y و قيم الأبعاد Width و Height.
لكن، ما هو نظام الإحداثيات في ال Canvas الثنائية الأبعاد، وكيف يتم التعامل معها؟؟
شاشة الكمبيوتر تحتوي على نظام إحداثيات متقطع (Discreet) حيث ان كل نقطة على الشاشة تمثل نقطة في نظام الإحداثيات. و يتم تمثيل كل نقطة على الشاشة من خلال زوج مرتب (x,y). و كل عمليات الرسم التي تتم على الشاشة تتم بناء على الإحداثيات الموصوفة في هذا النظام.
ألق نظرة على الصورة التالية:
في هذه الصوره نرى نظام الإحداثيات (المستوى الديكارتي) في أي بيئة حاسوبية ثنائية الأبعاد (تقريبا). حيث تمثل النقطة السوداء في أعلى يسار الصورة نقطة الأصل ذات الإحداثي (0،0) لهذا المستوى. محور X في هذا المستوى هو المحور الأفقي المتجه إلى اليسار، حيث يبدأ من الصفر في أعلى يسار الشاشة و يتزايد بالتحرك إلى اليمين حتى نصل إلى النهاية (حسب عرض الصورة أو مساحة الرسم) عند القيمة 400 في مثالنا.
أما المحور Y فيتمثل بالمحور المتجه من أعلى يسار الشاشة (الصورة، لوحة الرسم...) حيث القيمة صفر لهذا المحور، و تتزايد هذه القيمة كلما إتجهنا للأسفل حتى نصل إلى نهاية المحور (القيمة 300 في مثالنا).
أيضا بإمكانك أن تلاحظ في الصورة السابقة، أننا قمنا برسم مستطيل بين النقطتين (100،100) و النقطة (210،240). حيث تمثل النقطة الأولى الزاوية العليا اليسرى من المستطيل، و النقطة الأخرى تمثل الزاوية السفلى المينى منه.
ولكننا قمنا برسم سابقا في الكود برسم المستطيل بناء على نقطة و طول و عرض، أليس كذلك؟؟!!
نعم هذا صحيح، حيث لوصف مستطيل (مربع) بإمكاننا إستخدام واحدة من طريقتين:
Stroke Drawing
أبسط ما يمكن وصف الخطوط التي سوف نرسمها به هو القلم الرصاص، حيث يكون بإمكانك رسم الخطوط بالشكل الذي تريده كخطوط أولية و من ثم تقوم بتحبير هذه الخطوط بإستخدام قلم حبر.
حسنا، لرسم خط معين على ال Canvas في ال HTML5 يجب عليك أن تحرك مؤشر الرسم إلى النقطة التي تريد أن تبدأ رسم الخط منها، و من ثم بتقوم بعملية الرسم و تحديد النقطة التي ينتهي إليها الخط (لاحظ أن الخط يتم وصفه بنقطتين). مثال لرسم خط أفقي موازي لمحور X، يبدأ من الإحداثي (10,10)وينتهي بالإحداثي (200,10) نستخدم كود الجافا سكربت التالي:
myContext.moveTo(10,10); myContext.lineTo(200,10);
طبعا لا ننسى أننا قمنا بتعريف ال context و ال canvas سابقا في الكود.
عند تنفيذ هذا الكود لن تحصل على شيئ!!! لماذا؟؟ لأنه كما قلنا فإن هذه الخطوط هي مثل القلم الرصاص (مجرد تخطيط أولي و لن تظهر). إذا لكي نقوم بإظهار هذه الخطوط سوف يتوجب علينا تحبيرها. لعمل ذلك سوف نقوم بتحديد لون (أو نوع) الحبر المراد إستخدامه للتحبير، ومن ثم إستدعاء دالة لكي تقوم بعمل ذلك:
myContext.strokeStyle='#00FF00'; myContext.stroke();
منطقيا سوف يكون هذا الكود موجود بعد الكود السابق (لأن عملية التحبير تتم بعد التخطيط). قمنا هنا بتحديد اللون الأخضر من أجل عملية التحبير، و قمنا بإستدعاء الدالة stroke التي تقوم بعملية التحبير.
عند تشغيل الكود سوف تحصل على النتائج المرجوه.
مثال آخر، دعنا نقوم بكتابة كود لرسم شبكه رمادية:
var x,y;
for(x=0;x<=300;x+=30)
{
myContext.moveTo(x,0);
myContext.lineTo(x,300);
}
for(y=0;y<=300;y+=30)
{
myContext.moveTo(0,y);
myContext.lineTo(300,y);
}
myContext.strokeStyle='#222222';
myContext.stroke();هذا ما سوف نحصل عليه:
Arcs Drawing
ربما نحتاج لرسم دوائر معينة، أو منحنيات أو أقواس. توفر لنا ال HTML5 الدالة arc:
myContext.arc(centerX,centerY,Radius,startAngle,endAngle,antiClockWise)
تستخدم الدالة Arc لرسم الأقواس، وبما أن الدائرة هو أحد أشكال الأقواس، بإمكاننا إستخدام هذه الدالة لرسم دائرة.
الوسيط الأول و الثاني في هذه الدالة يمثلان مركز القوس أو الدائرة المراد رسمها. الوسيط الثالث Radius يمثل نصف قطر هذه الدائرة (القوس) الوسيط الرابع و الخامس يمثلان الزاوية التي يراد بداية رسم القوس منها، و من ثم الزاوية المراد الإنتهاء فيها. الوسيط الأخير يحدد فيما إذا كان سوف يتم رسم الدائرة بعكس إتجاه عقارب الساعة أم لا.
إذا أردنا رسم دائرة يجب ان تكون قيمة الوسيط الرابع و الخامس هي صفر إلى 360 (ولكن بالتقدير الدائري).
المثال التالي لرسم دائرة حدها لونه أخضر و معبئة بلون أزرق، مركز الدائرة في الإحداثي (100، 100)، ونصف قطرها 80:
myContext.strokeStyle='#00FF00'; myContext.fillStyle='#0000FF'; myContext.arc(100,100,80,0,Math.PI*2,true); myContext.stroke(); myContext.fill();
لاحظ أننا قمنا بإستدعاء الدالة stroke وذلك من أجل عمل حد محيط بالدائرة، و الدالة fill من أجل عمل تعبئة لهذه الدائرة. أيضا لا تنسى أننا قمنا بإعطاء ال strokeStyle و ال fillStyle قيم الألوان المطلوبة.
أضف إلى ذلك، الكائن Math موجود في الجافا سكربت و يحتوي على القيمة PI وهي القيمة النسبية 22\7.
Text Drawing
بطبيعة الحال قد يلزمنا أن نقوم برسم النصوص فوق ال Canvas في ال HTML5. طبعا النصوص التي سوف يتم رسمها سوف تكون عبارة عن صور و ليست نصوص حقيقة (لايمكن نسخها ولصقها مثلا).
لنأخذ الموضوع بأبسط أشكاله، لكي نقوم برسم نص على canvas، سوف نستخدم الدالة fillText الموجودة في الكائن context الخاص بهذه ال Canvas. الدالة fillText تأخذ الشكل التالي:
fillText(String yourText, xPos, yPos)
حيث يمثل الوسيط الأول النص المراد كتابته على ال canvas، ويمكن أن يكون هذا النص نصا إنجليزيا أو أي نص مبني على ترميز Unicode (يشمل العربية و غيرها بطبيعة الحال). الوسيط الثاني في هذه الدالة يمثل إحداثي X للموقع المراد بداية كتابة النص فيه. الوسيط الثالث يمثل الإحداثي Y للموقع المراد بداية كتاب النص فيه. جدير بالذكر أن النقطة التي يتم وصفها بهذين الإحداثيين تمثل الزاوية اليسرى السفلى من النص في الوضع الإفتراضي (يمكن تغيير هذا الوضع). المقصود أن ال xPos و ال yPos يمثلان إحداثيا الزاوية اليسرى السفلى موضح في الصورة التالية:
myContext.fillText("Hello World", 50, 50);عند كتابة كود الجافا سكربت السابق، سوف تحصل على كلمة Hello World مرسومة في الموقع (50,50) بنوع و حجم الخط الإفتراضي للمتصفح.
حسنا ألا يمكننا تغيير نوع الخط إذا؟؟ بالتأكيد يمكننا ذلك، إضافة إلى العديد من الخصائص الأخرى التي نستطيع أن نتحكم بشكل النص من خلالها، من هذه الخصائص:
myContext.textBaseline = "top";
myContext.font = "bold 18px Arial";
myContext.fillText("Hello World", 0, 0);في هذا المثال يتم رسم النص “HelloWorld ” في الموقع (0,0) بخط عريض من النوع Arial بحجم 18 بكسل.
حاول تغيير الخاصية BaseLine ل bottom أو middle، و لاحظ الفرق.
Images Drawing
كما رأينا قمنا برسم بعض الأشكال البسيطة و النصوص. ولكن هل يمكننا رسم صور حقيقة داخل لوح الرسم في ال HTML5 ؟؟
الجواب بالتأكيد نعم، حيث تزودنا ال HTML5 بالعديد من الدوال التي من خلالها نستطيع رسم و التحكم بالصور فيها.
دعنا نجرب ثم نشرح:
var myImage = new Image(); myImage.src = "MyImage.png"; myContext.drawImage(myImage, 50, 50);
هذا الكود هو أبسط ما يمكن أن نستخدمه في عملية رسم صورة على canvas، حيث قمنا أولا بتعريف كائن صورة، ثم قمنا بقراءة هذه الصورة من الملف الخاص بها (المسمى “myImage.png”) و من بعدها قمنا بإستخدام الدالة drawImage التي إستقبلت كائن الصورة و الإحداثيات التي نريد رسم الصورة فيها.
هناك العديد من الملاحظات الأخرى:
var myImage = document.getElementById("imgId");drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
هذه النسخة من الدالة drawImage تستقبل كائن الصورة، الإحداثيات المراد رسم الصورة فيها، أبعاد الصورة المراد رسمها. إضافة إلى ذلك تستقبل إحداثيات و حجم المربع (جزء من الصورة) المراد رسمه من الصورة الأصلية. بمعنى آخر بإستخدام هذه الدالة بإمكاننا إقتصاص جزء من صورة و رسمها على ال canvas في مكان و بأبعاد معينة.
في الشكل التالي، لدينا الصورة الأصلية “Source Image” التي نريد رسم جزء منها. Sx و Sy تمثل إحداثيات الزاوية اليسرى العلوية من الجزء المراد إقتصاصة من الصورة الأصلية. و Sh و Sw تمثل أبعاد هذا الجزء.
أضف إلى ذلك لدينا لوح الرسم الهدف الذي نريد الرسم عليه “Destination Canvas” حيث نقوم بوصف المكان المراد الرسم به من خلال المتغيرات Dx و Dy التي تحدد إحداثيات الزاوية العلوية اليسرى للمكان المراد الرسم فيه. و المتغيريين Dh و Dw الذان يمثلان طول و عرض هذا الجزء. و هي المتغيرات التي تستقبلها الدالة drawImage.
المثال التالي يلخص النقاط الثلاث السابقة:
var myImage = document.getElementById("imgId");
myImage.onload = function() {
myContext.drawImage(myImage, 50, 50,150,150, 20,20,220,220);
}هذا ليس كل شيئ عن الرسم في ال HTML5 بل هنالك العديد من المؤثرات و الأشياء الأخرى التي تستطيع عملها. منها مثلا تأثيرات الظلال، و مزج ألفا، و التدرجات اللونية و الخامات، و غيرها، إضافة إلى عمليات التحويل Transformations، و مصفوفات التحويل و غيرها...
لا ننسى الرسوم المتحركة أيضا Animation. سأقوم بكتابة مثال Animation بسيط و إرفاقة بالدرس لاحقا إن شاء الله.
إلى هنا إنتهى حديثنا في ال HTML5، وسيبدأ عملنا فيها، فليحاول كل منا إستغلالها بأقصى ما يمكن فيما يفيده في عمله، و لنكن (كعرب) من الرواد في دعم و إستخدام و التعامل مع ال HTML5 و ميزاتها.
أرجو أن أكون قد وفقت في إيصال الأفكار المرجوة بشكل واضح، و أرجو أن أكون قد ساهمت أو شجعت و لو بشكل بسيط، في وضع أقدامكم (ونفسي) على طريق عالم ال HTML5.
• في حال وجود ملاحظات أو أخطاء أرجو إرسالها.
• بإنتظار تعليقاتكم و مناقشتكم
لا يتبع! :D
ملاحظة: بعض الأكواد أو الصور مقتبسه من مواقع أخرى على الإنترنت (في الثلاث مقالات)، كاتب المقالة يحترم حقوق ملكية المحتويات المقتبسة لأصحابها
