Canvas


السلام عليكم و رحمه الله تعالى و بركاته

عندما كانت مواصفات SVG يتم كتابتها و مراجعتها و إدراجها فى محركات ترجمه ، كانت شركه Apple تعمل على الكائن Canvas الذى يمكن المحرك WEBKit من عمل Vector graphics ، تم ادراج مواصفات هذا الكائن فى نسخه HTML5 الذى تكتب مواصفاتها مجموعه WHATWG و بالتالى ادراج العنصر <canvas> فى المتصفحات التى تدعمه Firefox 1.5 و Safari2 و Opera9 و بالطبع موجود فى AIR  ، انترنت اكسبلورر لا يدعمه فى الوقت الحالى ، و يبدو انه لن يدعمه لأنه يدعم لغته XAML التى وراء تقنيه SilverLight و يدعم ايضا اللغه القديمه VRML التى تستتخدم لعمل رسومات عن طريق ال XML .

أبرز ما يميز canvas انه لا يوجد به التعقيدات و العناصر الكثيره جدا الموجوده ب SVG و XAML و VRML ، بل يعتمد كليا على الجافاسكربت ، يمكنك من خلال Canvas رسم اشكال معقده جدا من خلال Canvas JavaScript API ، فى الوقت الحالى الاشكال ثنائيه الابعاد فقط لكن فايرفوكس و اوبرا يبحثان ادراج امكانيه الرسم ثلاثى الابعاد بإستخدام OpenGL ، من أبرز الاعمال التى قام المبرمجين بها من خلال canvas : قام John Resig بإدراج اللغه Processing التى هى لغه لل visualization إلى الجافاسكربت عن طريق processing.js ، يمكن رؤيه مايمكن ان يتم عمله من خلال canvas بواسطه processing.js – بالطبع لابد ان تعرض الصفحه فى احد المتصفحات التى ذكرتها بالأعلى أو اجدد منها – ، قام أيضا Dion almaer و Ben Galbraith المدونين ب Ajaxian.com بإطلاق Bespin محرر تفاعلى مبنى على Canvas .

heart-by-canvas

يمكنك رسم القلب اعلاه عن طريق الكود التالى :

<canvas id="heart" width="150" height="150">
<script>
var canvas = document.getElementById("heart");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
</script>

game-canvas

و يمكنك عمل رسومات هذه اللعبه كما توضح هذه الصفحه

تم ذكر Canvas فى بعض الكتب مثل :

SitePoint » The Art and Science of JavaScript فى الفصل 3 .
O’Reilly » Painting the web فى الفصل ال 11 و 12 .
Apress » Pro JavaScript techniques الفصل 14 .

لكنى لن أجد شرح ل canvaas أفضل من شرح Mozilla كما يوضح الرابط بالأسفل

للمزيد :

Mozilla » Canvas tutorial
Canvas cheat sheet
Game using canvas

الأوسمة: ,

5 تعليقات to “Canvas”

  1. almhajer Says:

    يعطيك العافية على المقال سلمت يداك انا قراءت عنها بس زي ماذكرت المشكلة لمايكروسفت هذه مشكلة كبيرة صراحة لان مستخدمين العرب اكثر شي اكسبلورر وهذا يضعط تحت خط ان لافائدة ترجحو منها حاليا وهذا شي يدعو الى الاحباط لان فيها مميزات مهمة وتساعدك على انشاء اشياء معقدة وجميلة

  2. mostafa farghaly Says:

    يمكنك استخدام canvas فى اكسبلورر عن طريق مكتبه كتبها مهندوسا جوجل بإسم EXCanvas ، المكتبه تعتمد على تحويل اوامر ال canvas إلى VRML اذا كان المتصفح IE .

  3. almhajer Says:

    صحيح كما ذكرت ولكن ذلك يحتاج الى شيفرة كبيرة للتحق من النوع كذا وكذا لااجل متصفح بحد ذاته من دون المتصفحات الاخرى نامل ان تغير مايكروسفت وجهتها الى المقاييس العالمية في المستقبل لنحل ازمة الفوارق بين المتصفحات

  4. حائل Says:

    روعة رسمة القلب
    و اهنيك على المدونة المتميزة
    و كم نحن بحاجة الى امثال هذه المدونات

  5. moatazpharma Says:

    نامل ان تغير مايكروسفت وجهتها الى المقاييس العالمية في المستقبل لنحل ازمة الفوارق بين المتصفحات

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: