<Canvas> هو عنصر HTML جديد يمكن استخدامه بواسطة لغة البرنامج النصي (عادةً JavaScript) لرسم الرسومات. على سبيل المثال ، يمكن استخدامه لرسم الصور أو تصنيع الصور أو القيام بالرسوم المتحركة البسيطة (وليس بسيطة للغاية). تعرض الصورة على اليمين بعض أمثلة التطبيق لـ <canvas> ، وسنرى تنفيذها في هذا البرنامج التعليمي.
تم تقديم <Canvas> لأول مرة على لوحة معلومات Mac OS X من Apple ثم تم تطبيقها على Safari. تدعم المتصفحات على أساس Gecko1.8 ، مثل Firefox 1.5 ، هذا العنصر الجديد. يعد العنصر <canvas> جزءًا من تطبيقات Whatwg Web 1.0 ، وهو معروف للجميع ، مواصفات HTML 5 القياسية.
في هذا البرنامج التعليمي ، سأحاول إخبارك بكيفية استخدام عنصر <Canvas> في صفحة الويب الخاصة بك. يجب أن تمنحك الأمثلة المقدمة بعض المفاهيم الواضحة ، وهي ما يمكنك فعله مع <canvas>. يمكن أن تكون هذه الأمثلة أيضًا بمثابة نقطة انطلاق لتطبيقك <canvas>.
قبل البدء في استخدام
إن استخدام العنصر <canvas> ليس بالأمر الصعب ، طالما أن لديك المعرفة الأساسية لـ HTML و JavaScript.
كما ذكر أعلاه ، لا تدعم جميع المتصفحات الحديثة <Navas> ، لذلك تحتاج إلى Firefox 1.5 أو لاحقًا ، أو غيرها من المتصفحات المستندة إلى Gecko مثل Opera 9 ، أو إصدار حديث من Safari لرؤية جميع إجراءات الأمثلة.
عنصر <Canvas>
لنبدأ هذا البرنامج التعليمي من خلال النظر إلى عنصر <Canvas> نفسه.
لنبدأ بتعريف عنصر <Canvas>.
<canvas id = عرض البرنامج التعليمي = 150 ارتفاع = 150> </canvas>
هذا يشبه إلى حد كبير العنصر <img> ، والفرق الوحيد هو أنه لا يحتوي على سمات SRC و ALT. <Navas> يشبه إلى حد كبير <img> ، والفرق الوحيد هو أنه لا يحتوي على سمات SRC و ALT. يحتوي عنصر <Canvas> على سمتين فقط - العرض والارتفاع . هذه اختيارية على حد سواء ويمكن أيضًا تعيينها باستخدام خصائص DOM أو قواعد CSS. عندما لا يتم تحديد سمات العرض والارتفاع ، فإن القماش سيكون في البداية 300 بكسل و 150 بكسل . يمكن أن يكون هذا العنصر بشكل تعسفي بواسطة CSS ، ولكن أثناء تقديم الصورة ، يتم تحجيم الصورة لتناسب حجم التصميم. (إذا بدت عمليات العرض الخاصة بك مشوهة ، فحاول تحديد سمات العرض والارتفاع الخاصة بك بشكل صريح في سمات <canvas> ، وليس مع CSS.) من قماش).
ليست سمة المعرف خاصة بعنصر <Canvas> ولكنها واحدة من سمات HTML الافتراضية التي يمكن تطبيقها على (تقريبًا) كل عنصر HTML (مثل الفئة على سبيل المثال). من الجيد دائمًا توفير معرف لأن هذا يجعل من السهل تحديده في البرنامج النصي.
سمة المعرف ليست حصرية لـ <canvas>. تمامًا مثل علامة HTML القياسية ، يمكن لأي عنصر HTML تحديد قيمة المعرف الخاصة به. بشكل عام ، من الجيد تحديد معرف لعنصر ما ، مما يسهل تطبيقه في البرامج النصية.
يمكن تصميم عنصر <Canvas> تمامًا مثل أي صورة عادية (الهامش ، الحدود ، الخلفية ، إلخ). ومع ذلك ، لا تؤثر هذه القواعد على الرسم الفعلي على القماش. سنرى كيف يتم ذلك لاحقًا في هذا البرنامج التعليمي. عندما لا يتم تطبيق قواعد التصميم على اللوحة القماشية ، ستكون في البداية شفافة تمامًا. يمكن تصميم عنصر <Canvas> تمامًا مثل أي صورة عادية (الهامش ، الحدود ، الخلفية ، إلخ). ومع ذلك ، لا تؤثر هذه القواعد على الرسم الفعلي على القماش. سنرى كيف يتم ذلك لاحقًا في هذا البرنامج التعليمي. عندما لا يتم تطبيق قواعد التصميم على اللوحة القماشية ، ستكون في البداية شفافة تمامًا. يمكن تصميم عنصر <Canvas> تمامًا مثل أي صورة عادية (الهامش ، الحدود ، الخلفية ، إلخ) كما لو كانت صورة عادية. ومع ذلك ، فإن هذه الأنماط ليس لها أي تأثير على الصورة الفعلية التي تم إنشاؤها بواسطة قماش. أدناه سنرى كيفية تطبيق الأنماط. إذا لم تحدد نمطًا ، فإن القماش شفاف تمامًا افتراضيًا.
نظرًا لأن عنصر <Canvas> لا يزال جديدًا نسبيًا ولا يتم تنفيذه في بعض المتصفحات (مثل Firefox 1.0 و Internet Explorer) ، نحتاج إلى وسيلة لتوفير محتوى احتياطي عندما لا يدعم المتصفح العنصر.
نظرًا لأن <Canvas> جديد نسبيًا ، فإن بعض المتصفحات لا تنفذها ، مثل Firefox 1.0 و Internet Explorer ، نحتاج إلى توفير محتوى عرض بديل للمتصفحات التي لا تدعم القماش.
محظوظ هذا واضح للغاية: نحن نقدم فقط محتوى بديل داخل عنصر القماش. سوف تتجاهل المتصفحات التي لا تدعمها العنصر تمامًا وتجعل محتوى الاحتياطي ، والبعض الآخر سيجعل اللوحة القماشية بشكل طبيعي.
على سبيل المثال ، يمكننا تقديم وصف نصي لمحتوى القماش أو توفير صورة ثابتة للمحتوى الذي يتم تقديمه ديناميكيًا. هذا يمكن أن يبدو مثل هذا:
نحتاج فقط إلى إدراج محتوى بديل مباشرة في عنصر القماش. ستتجاهل المتصفحات التي لا تدعم اللوحة القماش عناصر القماش وتقدم المحتوى البديل مباشرة ، في حين أن المتصفحات المدعومة ستجعل قماشًا بشكل طبيعي. على سبيل المثال ، يمكننا ملء بعض النص أو الصور في قماش كمحتوى بديل:
<canvas id = width stockgraph = 150 ارتفاع = 150> سعر السهم الحالي: $ 3.15 +0.15 </canvas> <canvas id = wide width = 150 height = 150> <img src = images/clock.png width = 150 height = 150/> </canvas>
في تطبيق Apple Safari ، <canvas> هو عنصر يتم تنفيذه بنفس الطريقة <img> ؛ ليس لديها علامة نهاية. ومع ذلك ، لكي يتم استخدام <Canvas> على نطاق واسع على الويب ، يجب توفير بعض التسهيلات لمحتوى الاحتياطي. لذلك ، يتطلب تطبيق Mozilla علامة نهائية (</canvas>).
في Apple Safari ، يشبه تطبيق <canvas> إلى حد كبير <img> ، وليس له علامة نهائية. ومع ذلك ، لكي يكون <canvas> قابلاً للتطبيق على نطاق واسع في عالم الويب ، من الضروري توفير مكان للمحتوى البديل ، وبالتالي فإن إنهاء العلامة (</canvas>) في تنفيذ Mozilla ضروري.
إذا لم يكن هناك حاجة إلى محتوى العودة ، فسيتم توافق تمامًا مع كل من Safari و Mozilla - Safari ببساطة تتجاهل علامة النهائي.
إذا لم يكن هناك بديل ، فإن <canvas id = foo ...> </canvas> متوافق تمامًا مع Safari و Mozilla - Safari يتجاهل ببساطة علامة النهاية.
إذا كان محتوى العودة مطلوبًا ، فيجب استخدام بعض الحيل CSS لإخفاء محتوى الاحتياطي من Safari (والذي يجب أن يقدم فقط القماش) ، وأيضًا لإخفاء حيل CSS نفسها من IE (والتي يجب أن تقدم محتوى الاحتياطي).
إذا كان هناك محتوى بديل ، فيمكنك استخدام بعض حيل CSS لإخفاء محتوى بديل لـ Safari وفقط له ، لأنه يجب عرض المحتوى البديل في IE ولكن ليس في Safari.
يقوم <Canvas> بإنشاء سطح رسم ثابت للحجم يعرض سياقات عرض واحدة أو أكثر ، والتي يتم استخدامها لإنشاء المحتوى المعروض ومعالجته. سنركز على سياق التقديم ثنائي الأبعاد ، وهو السياق الوحيد المحدد حاليًا. في المستقبل ، قد توفر السياقات الأخرى أنواعًا مختلفة من التقديم ؛ على سبيل المثال ، من المحتمل أن يتم إضافة سياق ثلاثي الأبعاد يعتمد على OpenGL ES.
تفتح شاشة الرسم ذات الحجم الثابت الذي تم إنشاؤه بواسطة <Canvas> سياقات عرض واحدة أو أكثر ، والتي من خلالها يمكننا التحكم في ما يجب عرضه. نحن نركز على تقديم ثنائي الأبعاد ، وهو الخيار الوحيد في الوقت الحالي ، وقد يضيف سياق ثلاثي الأبعاد استنادًا إلى OpenGL ES في المستقبل.
<Navas> فارغ في البداية ، وعرض شيء يحتاج البرنامج النصي أولاً للوصول إلى سياق التقديم والرسم عليه. يحتوي عنصر القماش على طريقة DOM تسمى GetContext ، وتستخدم للحصول على سياق التقديم ووظائف الرسم الخاصة به. getContext () يأخذ معلمة واحدة ، نوع السياق.
تهيئة <canvas> فارغة. لرسم البرنامج النصي عليه ، يتطلب أولاً سياق التقديم. يمكن الحصول عليها من خلال طريقة getContext لكائن عنصر القماش. في الوقت نفسه ، يتم الحصول على بعض الوظائف للرسم. يقبل GetContext () قيمة تصف نوعها كوسيطة.
var canvas = document.getElementById ('Tutorial') ؛ var ctx = canvas.getContext ('2d') ؛في السطر الأول ، نرجع عقدة Canvas DOM باستخدام طريقة getlementbyid. يمكننا بعد ذلك الوصول إلى سياق الرسم باستخدام طريقة getContext.
يحصل السطر الأول أعلاه على عقدة DOM لكائن قماش من خلال طريقة getElementByID. بعد ذلك ، يتم الحصول على سياق تشغيل الرسم من خلال طريقة GetContext الخاصة به.
يتم عرض محتوى الاحتياط في المتصفحات التي لا تدعم <canvas> ؛ يمكن للنصوص أيضًا التحقق من الدعم عند تنفيذها. يمكن القيام بذلك بسهولة عن طريق اختبار طريقة getContext. يصبح مقتطف الكود الخاص بنا من الأعلى شيئًا من هذا القبيل:
بالإضافة إلى عرض محتوى بديل على المتصفحات غير المدعومة ، يمكنك أيضًا التحقق مما إذا كان المتصفح يدعم القماش من خلال البرامج النصية. هذه الطريقة بسيطة للغاية ، فقط تحكم على ما إذا كان getContext موجود.
var canvas = document.getElementById ('Tutorial') ؛ if (canvas.getContext) {var ctx = canvas.getContext ('2d') ؛ // رمز الرسم هنا} آخر {// canvas-unsupported code هنا}فيما يلي قالب أضيق الحدود ، سنستخدمه كنقطة انطلاق للأمثلة اللاحقة. يمكنك تنزيل هذا الملف للعمل معه على نظامك.
سنبدأ بأبسط قالب رمز التالي (مطلوب للحصول على أمثلة لاحقة) ، ويمكنك تنزيل الملف لاستخدامه محليًا.
<html> <Head> <title> Tutorial Canvas </title> <script type = text/javaScript> draw () {var canvas = document.getElementById ('Tutorial') ؛ if (canvas.getContext) {var ctx = canvas.getContext ('2d') ؛ }} </script> <type type = text/css> canvas {border: 1px solid Black ؛ } </style> </head> <body onload = draw () ؛> <canvas id = عرض البرنامج التعليمي = 150 ارتفاع = 150> </canvas> </body> </html>إذا نظرت إلى البرنامج النصي ، فسترى ، لقد قمت بإجراء وظيفة تسمى Draw ، والتي سيتم تنفيذها بمجرد الانتهاء من التحميل (عبر سمة Onload على علامة الجسم). يمكن أيضًا استدعاء هذه الوظيفة من SetTimeOut أو SetInterval أو أي وظيفة معالج الأحداث الأخرى تمامًا كما تم تحميل الصفحة أولاً.
إذا كنت حريصًا ، فستجد أنني قمت بإعداد وظيفة تسمى Draw ، والتي سيتم تنفيذها مرة واحدة بعد تحميل الصفحة (عن طريق تعيين خاصية Onload لعلامة الجسم) ، وبالطبع يمكن استدعاؤها أيضًا في SetTimeout أو SetInterval أو وظائف معالجة الأحداث الأخرى.
للبدء ، إليك مثال بسيط يرسم اثنين من المستطيلات المتقاطعة ، أحدهما شفافية ألفا. سنستكشف كيف يعمل هذا بمزيد من التفاصيل في أمثلة لاحقة.
للبدء ، دعونا نلقي نظرة بسيطة - ارسم مستطيلتين متداخلين ، أحدهما له تأثير شفاف ألفا. سنعطيك نظرة مفصلة على كيفية عمله في المثال التالي.
<html> <head> <script type = application/x-javaScript> daw () {var canvas = document.getElementById (canvas) ؛ if (canvas.getContext) {var ctx = canvas.getContext (2d) ؛ ctx.fillstyle = rgb (200،0،0) ؛ CTX.FillRect (10 ، 10 ، 55 ، 50) ؛ ctx.fillstyle = rgba (0 ، 0 ، 200 ، 0.5) ؛ CTX.FillRect (30 ، 30 ، 55 ، 50) ؛ }} </script> </head> <body onload = draw () ؛> <canvas id = canvas width = 150 height = 150> </tanvas> </body> </html>