Canvas دورة باللغة العربية

��﷽2nees.comتقديم أنيس أبو حميد –Canvas دورة

حديث مرفوع

الفهرسالمقدمة ما هو الCanvas؟ هل يتم إستخدام الCanvas للرسم في كل األوقات ؟ ماذا عن الSVG, CSS, DOM؟ المتصفحات الداعمة للCanvas رسومات بسيطة)Simples Drawing(Making ChartsImage FillsOpacityTransformsClipEventsrequestAnimationFrameAnimating with الخاتمة

[email protected] -دورة مجانية -أنيس حكمت أبو حميد

المقدمةإّن الحمد �، نحمده ونستعينه ونستغفره، ونعوذ با� من شرور أنفسنا ومن سيئات أعمالنا، من يهده هللا فال مضل له، ومن يضلل فال هادي

له، وأشهد أن ال إله إال هللا وحده ال شريك له، وأشهد أن دمحماً عبده ..أما بعد. ورسوله، صلوات هللا وسالمه عليه وعلى آله وصحبه

فإننا نعود لكم مجددا بفضل هللا تعالى وكرمه، في دوره جديدة تتحدث الذي ظهر جليا، وأصبح مستخدما منذ ظهور ال Canvasعن ال

HTML5وكان لظهوره أثر كبير في عالم الويب من حيب تصميم ،وبناء األلعاب، باإلضافة الى رسم األشكال Animationوتطوير ال

وسننتطرق هنا بإذن هللا تعالى الى هذه المواضيع بطريقة...والمخططات البيانية سهلة مختصرة تضعنا وإياكم على طريق جديد يمأله التحدي واإلثارة، واآلن

...هيا بنا لننطلق الى صفحات هذه الدورة المتواضعة


المقدمة

: متطلبات الدورة(1HTML(2JS )مهم جدا((3CSS(4HTML5 )معرفة عامة وليست الزامية(

: مالحظاتيجب عليك تطبيق جميع األمثلة وكتابتها بيديك، وهذا مهم في التعلم •

.لمثل هذه الدوراتهذا العمل مقدم للجميع بشكل مجاني، نسأل هللا تعالى أن يتقبل منا •

ومنكم أعمالنا، لذلك أبرئ الى هللا من أي فعل يخالف شرعه قد ينتج .اللهم قد بلغت، اللهم فاشهد.من جراء تعلمكم هذه الحروف


؟Canvasما هو ال

على شكل نقاط من األعم الى Canvasسنقوم بسرد مفهوم ال ^_^ األخص حتى نصل الى المفهوم العام والخاص له بإذن هللا تعالى

الCanvas هوAPI أضيف حديثا الى الHTML وتم دعمهويستخدم كوسيلة رسم ) +IE9(من جل المتصفحات الرئيسية

ثنائية األبعاد، يحيث تتيح لنا هذه اإلضافة الرسم مباشرة على ، كما JAVAأو ) plug-in(المتصفح بدون إستخدام ألي إضافة

...يمكن لهذه اإلضافة العمل على الجهاز المكتبي أو اللوحي الCanvas هوAPI يستخدمه المتصفح لرسم الخطوط

الخ، ويتم تحديد موقع الرسم من ..واألشكال والصور والنصوص .خالل المتصفح بنائا على ما نقدمه نحن من بيانات



الCanvas هوHTML5 tag يستخدم لرسم الرسومات، )عادة الجافا سكربت(المختلفة بشكل مباشر من خالل السكربت

ويكون السكربت المستخدم هو الريشة أو القلم المستخدم للرسم، الخاص بالرسم، ) اإلناء(فقط اللوحة Canvas tagويكون ال

وال يحتوي لوحده أي ميزة أو قدرة على الرسم من تلقاء نفسه، كإناء للرسم من خالل Canvasوهنا نصل الى أننا نستخدم ال

الجافا سكربت، وأوامر الرسم ثنائية األبعاد هذه هي ما تم إضافتها .Pixelsلتمكننا من الرسم، علما أن الرسم يتم على شكل



يقوم Canvasذكرنا في التعريف األخير أن ال :مالحظة مهمةأي النقاط الضوئية( Pixelsعلى رسم الرسومات على شكل

أو Shapes، وهي بهذا ال تملك )الموجودة في أي شاشة عرضVectors وال تملك ،object يمكننا من خالله التحكم بالرسم

، هي فقط رسمة تم)event handlersوهنا أقصد (النهائي الناتج . رسمها على النقاط الضوئية الخاصة بالشاشة

يختلف عن الرسم مع أخذ event handlersطبعا هذا ال () canvasلل Animationاإلعتبار بوجود

ويمكنك التحقق من ذلك عند عمل Vectorsوالحظ أن الرسم لن يكون zoom ببكسل(رح تحكي ..لمربع مثال قمت بإنشائه: (P


للرسم في كل Canvasهل يتم إستخدام ال ؟SVG, CSS, DOMاألوقات ؟ ماذا عن ال

في مجال تصميم المواقع، يمكننا إستخدام عدة طرق للرسم على CSS, DOM animation, Svgالمتصفح، هذه الطرق هي ال

..canvasباإلضافة الى ال لرسم بعض األشكال مثل رسم cssيمكنك إستخدام ال : cssال ) 1

DOMقطرة ماء، لكنها في الواقع في عملية تنسيق لعناصر Canvasموجودة لدي، وهذا يقودنا الى أمر آخر، بما أن ال

الوصول اليه، CSSعبارة عن وسيلة رسم بالبكسل، فال يمكن لل لكن يمكنك إستخدام ال ) للعنصر المرسوم( DOMفهو ليس border أوbackground لذات الCanvas..لنشاهد مثاال..




الحظ هذه القطرة مرسومة من خالل والحظ أنها فعال عملية ... cssال

^_^ تنسيق للعناصر


يستخدم لرسم األشكال، لكل vector APIعبارة عن : SVGال ) 2الخاص بها، وهذا يمكننا من إستخدام ال objectشكل منها ال

event handler لهذه األشكال المرسومة، باإلضافة الى ذلك لوعلى الشكل الناتج فسيبقى بشكله األصلي zoom inقمت بعمل ، لكن في ال )ألننا نتحدث عن زوايا ومتجهات(دون غباش Canvas ستحدث عملية بكسلة)pixelated– تشويش على

.. لهذا الشكل ) -شكل النقاط الضوئية3 (Dom Animation : تقوم هذه على تعريفobject لكل

عنصر في الشاشة، ويتم التفاعل مع األشكال من رسم أو تحريك .....!!jsوال cssمن خالل التعامل مع ال



! ما هذا الكالم الذي أتحدث به؟Domأم ال SVGأم ال cssماذا يعني ؟ هل نستخدم ال

Animation أم الCanvas؟؟؟!!وأين ومتى يكون هذا اإلستخدام صحيح ؟

Lowers Levelهو Canvasيجب أن تعلم صديقي أن ال : أوال، ولهذا فهو يعطيك قدرة أكبر SVG, CSS, DOMبالنسبة لل

على التحكم بالرسم، ويستخدم ذاكرة أقل، لكنه بذات الوقت يحتاج الى .^_^ شيفرة برمجية أكبر من الطرق األخرى



جاهز يمكننا جلبه shapeعندما يتوفر لدينا SVGنستخدم ال : ثانيا، mapsالى شاشة العرض، ومن أشهر األمثلة على ذلك الخرائط

ومن ثم Adobe Illustratorفيتم رسم الخريطة باستخدام برنامج ..وغيرها الكثير من األمثلة SVGيتم تصديره على شكل



عندما يتواجد لدينا مساحة كبيرة DOMأو cssنستخدم ال : ثالثاثابتة ونرغب بالرسم وتحريك هذا الرسم داخل هذه المساحة، أو عند

، وقد يكون هذا النوع األكثر 3D transformsرغبتنا باستخدام شيوعا واستخداما ألغلب المطورين بشكل عام، بحيث يتم رسم

والكثير يقوم بعمل ال CSSالتأثيرات وغيرها باستخدام ال Animation من خالل الDOM خصوصا مع دخول ال ،

Parallax Scrolling لكن اآلن، وبعد دخول ال ،HTML5 وتطور ،تقنيات العرض، أصبح المطورين النشطين يبحثون عن األسلوب األفضل

لكل جزئية، ولهذا قمنا بتفصيل بعض النقاط بشكل عام عن اإلختالفات بين ...هذه الطرق في التأثير والرسم


Canvasالمتصفحات الداعمة لل


الحظ هنا أن معظم المتصفحات الرئيسية Canvasوأنظمة التشغيل تدعم ال

ولذلك فهو وسيلة جيدة ومدعومة للرسم، كما أن هذا الدعم ال يقتصر على أجهزة

سطح المكتب أو الالبتوب، بل يشمل كذلك *^_...الهواتف الذكية

من هناالمزيد –القرآن الكريم –سورة الفاتحة

http://quran.ksu.edu.sa/index.php�

)Simples Drawing(رسومات بسيطة

وسيلة رسم سهلة، ويمكننا من Canvasتحدثنا سابقا عن أن ال خاللها إنشاء الرسومات ثنائية األبعاد بكل سهولة، وإن كنت سابقا قد

، 2Dقمت برسم أي شكل ثنائي األبعاد من خالل الفالش أو الجافا ، فيمكنك إستخدام ال^_^فيفترض بك أن تستطيع إنشائه هنا أيضا

Fill and stroke colorومن ثم رسم األشكال، واآلن لنشاهد ،مجموعة من األمثلة على رسمات بسيطة يمكننا تنفيذها من خالل ال

Canvas كما أرجو منك اإلهتمام باألمثلة وتطبيقها والتجربة العملية لما ،يتم ذكره، وسيتم هنا التطرق لشرح الخصائص، الخاصية التي سيتم

واآلن لننطلق * ... ^_شرحها في كل مثال، لن تعاد في المثال الذي تليه ^_^ على بركة هللا



، ولنشاهد كيف ستتم عملية rectangleسنقوم اآلن برسم : 1مثال : الرسم هنا Objectهي دالة تستخدم إلرجاع ال : ()getContext: مالحظة

، ويتم هذاCanvasالذي يدعم الخصائص والدوال للرسم على ال Selectorالمراد من خالل ال Canvasعندما نحصل على ال

.()getContext، ومن ثم استخدام الدالة IDمثل ال

تستخدم لتحديد أن الدوال التي سيتمgetContext(“2D”):2مالحظة إستخدامها تخص الرسم ثنائي األبعاد، مثل رسم الخطوط والنصوص

.الخ..والدوائر






:2مثال

عرض األمثلة



يدعم رسم Canvasكما شاهدنا في األمثلة السابقة، فإن ال شكل المستطيل مباشرة، وهو الشكل الوحيد الذي يتم رسمه بشكل

، ولرسم أشكال أخرى عليك القيام بذلك بCanvasمباشر في ال هي Paths، وال ^_^ Pathنفسك، وذلك من خالل إستخدام ال

األشكال التي يتم إنشائها من مجموعة من الخطوط المستقيمة:، مثل^_^والمنحنية

واآلن ما رأيك أن نكتب الشيفرة البرمجية الخاصة

بهذا الشكل؟



:3مثال شاهد هذه

الشيفرة البرمجيةومن ثم قم

بتطبيقها، وشاهدالنتيجة، وبعد ذلك

إنتقل للشريحة التالية حتى نتدارس ما * ^_تمت كتابته



:شرح المثال السابقbeginPath() : باستخدام هذه الدالة نحن نخبر الCanvas أننا

أو إعادة تهيئة ال Pathوهي تقوم على تهيئة ال Pathسنقوم برسم path داخل الCanvas )begins or resets the current path (

moveTo() : تستخدم هذه الدالة لنقل موقع الPath الى نقطة معينة)x, y (أقومبتحديدها على المحور السيني والصادي، عملية النقل هذه تتم دون رسم خط أو

path وهذه الدالة تعد باإلضافة الدوال التي باألسفل من الدوال الخاصة ...ظاهر للمستخدم)عن ص 30بكسل عن س و 10تعني ابتعد 10,30في المثال *..(^_ Pathsبإنشاء ال

(lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc())



bezierCurveTo() :تستخدم هذه الدالة لرسم منحنيات بيزيرcubic Bézier(المكعبة curve( ويعتمد هذا النوع من المنحنيات ،

: على وجود أربع نقاط هي حسب المعادلة الخاصة بهP0, P1, P2, P3 هذه النقاط هي من تشكل منحنى بيزير، ويسمى

هذا المنحنى الناتج من جراء إستخدام هذه النقاط المنحنى المكعب، * ..^_ألنه يشكل في الفضاء أو البعد العالي على هذا الشكل

نقاط الزامية 3اآلن أثناء تعاملنا برمجيا مع هذا المنحنى يلزمنا تحديد : ومطلوبة وهي كالتالي

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);



cp1x, cp1y : هي نقاط التحكم األولى في المنحنى، والتي تستخدمفي حساب منحنى مكعب بيريز

cp2x, cp2y : هي نقاط التحكم الثانية في المنحنى، والتي تستخدم.أيضا في حساب منحنى مكعب بيريز

x,y :هنا اإلحداثيات الخاصة بنقطة النهاية لمنحنى بيريز.، moveToأما إحداثيات البداية فيتم تحديدها من خالل ال : مالحظة

الى نقطة معينة Pathفكما ذكرنا هي المسؤولة عن تحديد نقل ال ^_^ حتى نستطيع البدء بالرسم من هناك



lineTo : تستخدم هذه الدالة لرسم خط داخل الCanvas هذا ،هي آخر نقطة وصلنا اليها أثناء الرسم، الخط تكون نقطة البداية له

moveToوالحالة اإلفتراضية قبل البدء بالرسم من خالل إستخدام )القيم(أما النقاط .. Canvasأعلى يسار ال ) 0,0(هي

وهي تحدد أين سيقف أو سينتهي هذا الخط ) x, y(المطلوبة منا فهي وقمت بإدخال القيم ) 0,0(فمثال لو إفترضنا أنني بدأت من

صادي، 0سيني 0فإن الخط سيتم رسمه اعتبار من ) 100,200(^_^..صادي 200سيني، 100الى النقطة



closePath() : تقوم هذه الدالة على رسمpath من آخر نقطة قمتبرسمها رجوعا الى نقطة البداية، أي أننا فعليا نقوم بإغالق الشكل

...الذي نقوم برسمه بحيث تتصل جميع النقاط ببعضها

Fill() : تقوم هذه الدالة على تعبئةالشكل المراد رسمه، ويكون اللون اإلفتراضي للتعبئة هو اللون األسود

، وفي هذا المثال كان fillStyleويمكن تغيير اللون من خالل ال *^_اللون أحمر هو لون التعبئة



lineWidth :تستخدم هذه الخاصية لتحديد مقدار السمك للخطالمرسوم، كما يمكن استخدام هذه الخاصية إلرجاع قيمة السمك الحالية

^^ ، طبعا سمك الخط يتم تحديد قيمته بالبكسل P:للخط المرسوم

:بكسل 15شاهد نفس المثال السابق بسمك



strokeStyle : هذه الخاصية تتيح لنا تغيير لون الخط المستخدم بالرسم، ومنالخيارات الجميلة المتاحة لهذه الخاصية هي إمكانية إستخدام لون عادي مثل األحمر

وبهذا تكون الصيغة patternأو Gradientالخ، أو يمكننا إستخدام ..واألصفر : العامة هي

context.strokeStyle=color|gradient|pattern;يجب عليك إستخدام دالة أخرى هي gradientإلستخدام ال

createLinearGradient وإلستخدام الpattern يجب عليك إستخدام الدالةcreatePattern بحيث تأخذ ال ،obj الناتج

منهم وتجعله القيمة الخاصة بال strokeStyle باإلضافة الى بعض التعديالت

: الطفيفة، واآلن شاهد المثال



هذه الدالة هي فعليا من تقوم بتنفيذ أو تطبيق: ()strokeوأخيرا ال و moveToالرسم الذي قمنا ببنائه من خالل الخصائص السابقة

lineTo واللون اإلفتراضي له هو اللون األسود ، ...^_^ واآلن لنشاهد بعض األمثلة

دعاء



والذي سأقوم بتقسيمة الى عدة اآلن، أريدك أن تنتبه لهذا المثال: أجزاءلو طلبت منك القيام بكتابة شيفرة برمجية لطباعة الشكل : أ-4مثال

الموجود في األسفل، هل تستطيع ذلك؟ حاول كتابة الشيفرة البرمجيةله، فهي شيفرة سهلة ومما تعلمناه، بعد ذلك إنتقل لترى الشيفرة

: البرمجية في الشريحة التالية



:الشيفرة البرمجية للشكل السابقإن هذه الشيفرة البرمجية

سترسم الشكل السابق،لكن كما أعتقد أن

حاولت تعبئة المربع األبيض بلون آخر، لكن المحاولة بائت

بالفشل من خالل ال Fill .. لماذا؟



moveToوال lineToلقد قمت برسم الشكل السابق من خالل ال تعني نقل الموقع moveToوهو ما تعلمناه، لكن عملية إستخدام ال

لن يدور pathمن نقطة الى أخرى دون رسم خط، وهذا يعني أن ال لو قمت باستخدامها فلن تظهر Fillضمن حلقة متصلة، لهذا فإن ال متصل، وال pathتحتاج الى Fillأي تعبئة داخل الشكل، ألن ال ...أقصد بمتصل أن يكون مغلقا

: واآلن ماذا لو طلبت منك رسم هذا الشكل) قم بكتابة الشيفرة البرمجية: (ب-4المثال

^_^بعد ذلك إنتقل للشريحة التالية



:ب-4الشيفرة البرمجية للمثال Custom Shapeاآلن عند قيامك برسم

يجب عليك البحث عن طريقة لتعبئةأو تلوين النقاط، ويمكن أن يتم هذا بأكثر

من طريقة، ومن أهم الطرق هي) Layers(إستخدام فكرة الطبقات

بحيث يتم إضافة أو رسم شكل فوق الشكل المطلوب تعبئته، وبهذا يظهر

الشكل كا نرغب به، الحظ هنا في هذ المثال لقد قمنا برسم مستطيل في نفس

المساحة التي نرغب بتعبئتها باللون األزرق ^_^ ..


..واآلن هل يمكننا

رسم المثالين السابقين بشيفرة

برمجة أكثر إحترافية وأقل بعدد األسطر؟الجواب نعم،: شاهد المثال




في المثال lineJoinو lineCapلقد قمت باستخدام الخاصية السابق، لكن هل تعلم ما هي وظيفة كل من هاتين الخاصيتين ؟

: شاهد أوال هذه الصورة لمعرفة الفرق وفائدة هاتين الخاصيتين: بعد مشاهدتك للصورة، إنتقل للشريحة التالية



lineCap:هذه الخاصية مسؤولة عن تحديد أو إرجاع الشكلبحيث roundالخاص بنقطة النهاية للخط، مثل إستخدام القيمة

كان شكل نهاية الخط في الصورة السابقة مستدير في حين أنه في ...الحالة اإلفتراضية لم يكن كذلك

...تجعل الخط أطول نوعا ما squareو roundالقيمة : مالحظةlineJoin : هذه الخاصية مسؤولة عن تحديد أو إرجاع الشكل

بحيث roundالخاص بنقطة التقاء خطين معا، مثل إستخدام القيمة )مستدير(كان شكل نقطة اإللتقاء على شكل منحى



واآلن لنشاهد جميع األمثلة السابقة معا، لكن أرجوا أن تكون اآلن قد قمت بتطبيق جميع األمثلة السابقة، وحاول أن تكون تفكر أثناء

التطبيق، وحاول تغيير القيم وحذف وإضافة خصائص لمشاهدة وفهم ^_^ النتائج بالطريقة الصحيحة


--رحمه هللا تعالى –صالح الدين األيوبي



، نعم، ^_^يمكننا رسم الصور Canvasمن خالل ال : 5مثال ال تتعجب، عملية الرسم تقوم على أخذ الصورة المراد رسمها، ومن

ثم تنفيذ الرسم على الشاشة بالبكسل كما هي الصورة، كما يتيح لنا من خالل رسم الصور التحكم بطبيعة الصورة، هل Canvasال

أم بشكل ممتد ) Normal Scale(نرسمها بشكلها اإلفتراضي أو أننا اقتبسنا جزء من ) stretched(أطول من الصورة األصلية /

الخ، هذه األمور يمكن تنفيذها من خالل ) ...Slicing(الصورة ، وهذه الدالة مفيدة جدا إلعطاء نوع من()drawImageالدالة

التأثيرات الجمالية في األلعاب أو الحركات المختلفة، كما أنها أسرع في *^_...بعض األحيان من بعض األنماط األخرى



واآلن هل هذا وحده ما تقوم به هذه الدالة؟ Canvasطبعا ال، فهذه الدالة أيضا تستطيع رسم فيديو داخل ال

، لكن هناك مالحظة مهمة، وهي أن هذه الدالة ال يمكنها البدء^_^بالرسم قبل تحميل الصورة، ولنضمن عمل هذه الدالة نستخدم

onload واآلن لنشاهد ^^، وبهذا تسير األمور بشكلها الجميل ،^_^مثاال عمليا على هذه الدالة

أو ()window.onload: مالحظةdocument.getElementById("imageID").onload

..يمكننا إستخدامها للتحقق من أن الصورة المطلوبة تم تحميلها أم ال

)Simples Drawing(رسومات بسيطة :واآلن لنشاهد المثال الخامس في هذا العنوان

في هذا المثال الصورة األصلية حجمها

والصورة 256*256الناتجة بعد عملية الرسم

256* 256بحجم لكنني قمت برسمها على

بكسل من 100بعد المحور السيني الخاص

..^_^ Canvasبال واآلن لنذهب الى الشريحة

التالية لنشرح القيم التي يمكننا إستخدامها مع

^_^ drawImageال




:هي drawImageالصيغة العامة لل

في الصيغة فعليك sأوال عندما تشاهد الرمز أن تعلم أن هذا الرمز يعود على الصورة

يعود dوأن الرمز ) source(األصلية )شاهد الصورة(على الصورة المراد رسمها

)destination. (--< الشريحة التاليةصورة مهمة جدا

وسيتم شرح الرموز المجودة على الصورة في

..الشرائح التالية



يمثل هذا المتغير العنصر الذي سيتم رسمه داخل ال : imageال Canvas ويمكن أن يكون صورة، فيديو، أو حتىcanvas آخر.

تمثل هذه نقطة البداية السينية للصورة األصلية، والنقطة : sxال من اليسار، وتغيير القيمة الخاص بها يعني أنك 0اإلفتراضية لها هي

ترغب برسم الصورة من النقطة التي قمت بتحدديها على المحور .السيني

تمثل هذه نقطة البداية على المحور الصادي، والقيمة اإلفتراضية : syال من األعلى، وتغيير القيمة هنا يعني أنك ترغب ببدء رسم هذه 0لها هي

...الصورة من النقطة التي قمت بتحديدها على المحور الصادي



تمثل هذه مقدار ما سيتم إقتطاعه من الصورة األصلية، : swidthال )اإلقتطاع بشكل عرضي للصورة (وتكون هذه القيمة للمحور السيني

تمثل هذه مقدار ما سيتم إقتطاعة من الصورة األصلية : sheightال اإلنقطاع بشكل (رأسيا، وبهذا تكون هذه الصورة للمحور الصادي

)رأسي يمثل اإلرتفاع

، وهي نقطة Canvasتمثل هذه النقطة المحور السيني في ال : dxال .canvasالزامية، وبداية القيمة صفر هنا تعني أعلى يسار ال



، وهي نقطة الزامية، Canvasتمثل هذه النقطة المحور الصادي في ال : dyال . canvasوبداية القيمة صفر هنا تعني أعلى يسار ال

هذا المتغير يمثل العرض الخاص بالحيز الذي سيتم رسم الصورة : dWidthال للصورة، وفي حال عدم تحديد القيمة لها scalingبداخله، وهي تسمح بعمل

..للصورة scaleلن يتم عمل

هذا المتغير يمثل اإلرتفاع الخاص بالحيز الذي سيتم رسم : dHeightال للصورة، وفي حال عدم تحديد scalingالصورة بداخله، وهي تسمح بعمل

..للصورة scaleالقيمة لها لن يتم عمل

^_^واآلن، لنشاهد مجموعة من األمثلة المتنوعة على ما ذكرناه لهذه القيم



:ب-5مثال الحظ هنا، لقد

قمنا بتحديد حجمالصورة المراد رسمها داخل ال

Canvas بعلى 175*150 10سيني 50بعد

* ^_صادي



:ج-5مثال في هذا المثال لقد قمنا

باقتطاع جزء من الصورة األصلية ومن ثم رسمه مجددا داخل

Canvasال الحظ أنني أوال قمت

و 20بتحديد النقطة كنقطة لتحديد 100

نقطة بداية القطع من الصورة األصلية،

في مقدار 120وال ما أرغب بقطعه

30، و ^^ورسمه مكان الرسم 75وال

canvas في ال



)canvasداخل canvasمثال يوضح طريقة رسم : (د-5مثال الحظ في هذا المثال لقد

Canvasقمنا برسم ال )ج-5مثال (السابق

مجددا داخل ال Canvas 5- د_^*



:هـ-5 مثالاذا لم يعمل الفيديو عند النقر، يمكنك مشاهدته

من خالل الفيديو المعنون ب SampleExample في ملف الدورة^_^

الحظ من خالل الفيديو، أن الفيديو يعمل، وال Canvas يعمل معا، والفكرة هي بكل بساطة

تكمن بأن الفيديو أصال عبارة عن صورة تتحرك بسرعة في الثانية الواحدة، وبهذا يمكننا

استغالل الفكرة وأخذ الصور هه ورسمها ، وهنا يمكننا إستخدام ال Canvasداخل ال

setInterval _^.. *شاهد الشيفرة البرمجة :



كتابة في اإلحترافية المعايير ضمن العمل ليكون طبعا :مالحظةاإلنتهاء عند setInterval إيقاف دوما تنسى ال البرمجية، الشيفرة

بل ،*^_ باألمثلة الفكرة هذه أنفذ لن وطبعا ،*^_ إستخدامها منمع ذلك بعد ستظهر التي المشكلة حل وحاول( P: أنت تنفيذها حاول )P: الفيديو لنشاهد واآلن ،^_^ الدالة هذه من تعالى هللا بفضل إنتهينا نكون وبهذا*_* األمثلة هذه تطبيق تنسى وال ،^_^ السابقة األمثلة جميع


^_^راحة نفسية وفرحة غامرة ^_^



يمكننا والتي أيضا، البسيطة الرسومات على األمثلة من :6 مثالdraw( النصوص رسم هي تنفيذها text( ^_^، إستخدام ويمكن

حجم مثل CSS ال مع نستخدمها التي والمزايا الخصائص نفسالخ.. ونوعه الخط

داخل الخطوط لرسم ()strokeText أو ()fillText إستخدام يمكنك :هي العامة والصيغة ،*^_ Canvas ال

context.fillText(text,x,y,maxWidth); السيني، المحور من الرسم بداية نقطة x وال ،text هو النص يكون بحيث

يأخذه أن يمكن عرض أكبر maxWidth وال الصادي، للمحور y وال*^_.. النص



إنتقل ثم المثال شاهد ..التالية للشريحة



أثناء الريبة بعض تثير قد واحدة نقطة سأشرح السابق، المثال في عن مسؤولة الخاصية فهذه ،textAlign ال إستخدام وهي العمل، باتجاه هي هل النص، بهذا الخاصة اإلزاحة مقدار إرجاع أو تحديد:كالتالي وهي الخ،... اليسار أو اليمينstart: تم التي النقطة من النص رسم ويبدأ اإلفتراضية، الحالة وهي

.. والصادي السيني المحور على بنائا تحديدهاend:وص س ل تحديدها تم التي النقاط في الرسم ينتهي أن يجب هنا

Center: تم التي النقاط في النص منتصف يكون أن يجب هنا .ص و س من لكل تحديدها

Left: من كل على بنائا تحديدها تم التي من أيضا النقطة برسم البدء يتم وهنا .ص و س

Right: ص و س ل تحديدها تم التي النقاط في الرسم ينتهي أن يجب وهنا.



؟left وال start ال بين الفرق ما ،*^_ القوي والسؤال ؟right وال end ال أو

align هي start ال أن هو :الجواب left المتصفح يكون عندما LTR، المتصفح كان اذا لكن RTL ال فسيكون start هو

align right، لل رسمك أثناء عملك من التأكد على إحرص لذلكCanvas ال على بك الخاص للرسم المتصفحات قرائة لطريقة Canvas _^*..البحث يمكنك الخصائص، من العديد هناك طبعا

baseline ال مثل وإستخدامها عنها :P المثال شاهد واآلن:




المتدرج الرسم هو الموضوع، هذا تحت تندرج جزئية وآخر :7 مثال *^_ )Gradients( ال

createLinearGradient الدالة إستخدام يمكننا تدريج أي لرسم لرسم createRadialGradient الدالة أو خطي تدرج لرسم )radial/circular(.. قطري نصف أو شعاعي تدرج

التدرج؟ هذا إستخدام يمكننا أين ،^^ اآلن والسؤالمن الخ.. والخطوط والمربعات النصوص، من كل في :الجواب*^_ o_0 المزيد وغيرها سابقا تعلمناها التي األمور



تم ما على والتركيز المثال مشاهدة بعد:أ-7 :مثاال لنشاهد واآلن *^_ التالية للشريحة إنتقل تظليله،



على fillRect ل تدرج رسم يمثل المثال هذا فإن تالحظ، كما أوال الموجودة األرقام هذه ما لكن ،^^ خطي التدرج ونوع الكامل، حجمهالدالة؟ هذه داخل

:العامة الصيغةcontext.createLinearGradient(x0,y0,x1,y1);

X0: التدرج بداية لنقطة السيني اإلحداثي.Y0: التدرج بداية لنقطة الصادي اإلحداثي.X1: التدرج نهاية لنقطة السيني اإلحداثي.X2: تابع >== .التدرج نهاية لنقطة الصادي اإلحداثي



تحديد عن المسؤولة الدالة فهي :()addColorStop الدالة أما لون، لكل التدرج بنهاية الخاصة والنقاط بالتدرج، الخاصة األلوان

.*^_ 1 الى 0 من النقط تمثيل ويتم

قيمة شكل على بالتدرج الخاص object ال إستخدام يتم :مالحظة)value( ال داخل توضع strokeStyleأو fillStyle _^*

تحديد خالل من التدرج باتجاه بالتحكم قمت المثال في :2 مالحظة 256 وينتهي 0 يبدأ كان بحيث الدالة داخل التدرج ونهاية لبداية القيم

.. صحيح والعكس ...*^_ صاديا 0 وينتهي ويبدأ سينيا،



*^_ التدرج شكل لتغير القيم تلعبه التي الدور الحظ:ب-7 مثال



:ج-7 مثال



الموضوع وهذا الجزئية هذه من تعالى هللا بفضل إنتهينا نكون وبهذا، جديدة جزئية الى تعالى هللا بإذن معا سننتقل واآلن الدورة، من

بالتعلم رغبت إذا جدا مهم التطبيق مجددا، أكرر لكن جديد، وموضوعواقرأ إبحث مشكلة أي واجهتك وإن األمثلة، طبق..مهاراتك وتطوير

تطوير على التركيز باب ومن.... تأكيد بكل ستنجح الكرة وأعد :الدالة عن )البحث( اإلطالع منكم أرجوا مهاراتكم،

createRadialGradient الجديد الموضوع في سنستخدمها ألننا:*^_ 7 رقم المثال في عرضها تم التي األمثلة شاهد اآلن


| |Ottoman empireاالمبراطورية العثمانية : منقول من

Making Charts


من بياني مخطط أو شكل رسم يمكننا كيف معا سنتعلم الفصل هذا في البرمجية الحركات بعض الى باإلضافة سابقا، تعلمناه ما خالل

لو فمثال سكربت، للجافا معرفتنا خالل من نعلمها والتي البسيطة هذه في يظهر كما أشكاله بأبسط بياني مخطط لرسم اآلن إحتجنا

بكتابتها؟ ستقوم التي البرمجية الشيفرة هي ما الصورة،من بسطة بكل تنفيذها يمكننا البسيطة الرسمة هذه

باإلضافة )سكربت جافا( واحدة دوران جملة خاللولنفرض .. Canvas ال في سابقا تعلمناه ما الى54 ,30 ,20 ,68 ,16 المستخدمة القيم هي هذه أن

Making Charts


:البرمجية الشيفرة شاهد واآلن فإنني تالحظ كما

ورسم بإنشاء قمت البياني الشكل هذا

بهذه تراه الذي بشكلهال القليلة، األسطرData مجموعة تمثل

للمستطيالت القيم البياني، الشكل داخل

عمليات وجود وسببو )i*100( الضربdp * تنسيق هو 5

..لكن...الشكل

Making Charts


بأول البدء وقبل السابق، البياني الرسم في مشاكل عدة هناك لكنبكل هي rect ال داخل من بها قمنا التي العمليات أن أنوه مشكلة أن يعني ال هذا لكن حقيقيا، شكال وإعطائه الشكل، لتنسيق بساطة

بكل ستؤثر هنا بإستخدامها سنقوم التي العمليات إن بل عشوائية، القيم تتناسب أن يجب عملية أي فإن وبهذا المخرجات، شكل على تأكيد التي الحاالت خضم في(... الحقا عمله سيتم ما جميع مع خطي بشكل

.. )هنا اليها سنتطرق الى األعلى من يبدأ البياني الرسم أن في تكمن اآلولى المشكلة واآلن

ال أن الدورة بداية في تحدثنا ألننا طبيعي، األمر وهذا األسفل،Canvas كيف واآلن ،*^_ الرسم إنطالق كنقطة يساره أعلى يعتمد

المشكلة؟ هذه حل يمكننا

Making Charts


:المثال شاهد

ويتم ،)Y( قيمة تغيير خالل من حدث التغيير أن والحظ المثال، الحظ منه مطروحا 500 وهو canvas ال إرتفاع حساب خالل من ذلك

Making Charts


dp( هنا وهو العامود إرتفاع * أخرى قيمة أيضا منه مطروحا )5 في 0 تركت لو بحيث فقط، تنسيقية قيمة هذه وتمثل 30 وهي إضافية*^_... canvas لل السفلي الخط من األعمدة ستبدأ السابق المثال

الثانية المشكلة الى ننتقل األولى المشكلة حل من اإلنتهاء بعد واآلنلكل القيم تمثل بحيث وعناوين خطوط له يوجد البياني الرسم أن وهي

أيضا حله يمكن األمر وهذا..العامود هذا ماهية وتمثل بياني، عامود^_^ معا ذلك لنشاهد..*^_ الرسم خالل من

MakingCharts


:مثال

الحظ في هذا المثال كيف أن الرسم البياني بدء يتضح شيئا فشيئا، لكن هذا الشكل فيه مشكلة أيضا، وهي أن أعمدة البيان خارجة أسفل خطوط المحور للرسم البياني، لذلك

.. P:لنشاهد مثاال لنتخلص منها

Making Charts


:مثال

كان التغيير أن المثال هذا في الحظ الخاص السطر وهو واحد، سطر على

عليه بالتعديل قمنا فقط األعمدة، برسم ^^ مختلفة نقاط من األعمدة لتبدأ

عناوين لتمثيل باألمثلة إستخدامها تم التي القيم :مالحظة... المثال وبناء توضيح فقط منها الهدف دقيقة، غير األعمدة

Making Charts


؟ )Piechart( الدائري البياني الرسم عن ماذا واآلن ؟canvas ال خالل من رسمه يمكننا هل

*^_ ذلك على سريعا مثاال لنأخذ نعم، تأكيد بكل الجواب :)السابقة األمثلة في إستخدمناها التي القيم على سنعتمد( الخطوات

–قيمة لكل األلوان من مجموعة تحتوي مصفوفة بإضافة سنقوم )1 –القيمة هذه سيمثل لون كل أن يعني وهذا

Making Charts


:لدينا الموجودة القيم جميع مجموع بحساب سنقوم )2

الدائرة مركز أن وسنفرض الدائرة، مركز تحديد علينا يجب اآلن )3 ،canvas ال منتصف في أي 250,250 النقطة في سيكون

رسمها ثم ومن قيمة، بكل الخاصة الزاوية بحساب سنقوم ذلك بعد أو منحنى من( آخر الى قوس من اإلنتقال يتم وحتى ،arc ال خالل من

)..السابق القوس قيمة نحفظ رسمها من اإلنتهاء بعد أخرى الى زاوية

Making Charts


لدينا ليصبحالشيفرة هذه

:البرمجية

Making Charts


أو أقواس لرسم canvas ال في الدالة هذه تستخدم :arc الدالة)الدائرة من أجزاء أو الدوائر لرسم تستخدم والتي( منحنيات :هي الدالة لهذه العامة الصيغة

.الدائرة لمركز السيني المحور القيمة تمثل :x ال.الدائرة لمركز الصادي المحور القيمة تمثل :y ال.الدائرة قطر نصف تمثل :r ال.القوس أو للمنحنى الرسم ببدأ الخاصة الزاوية تمثل :sAngle ال.بالزاوية الخاصة الرسم إنتهاء نقطة تمثل :eAngle ال أي false اإلفتراضية قيمتها إختيارية قيمة :counterclockwise ال

عقارب عكس الرسم تعني true الساعة، عقارب مع سيكون الرسم أن.. الساعة

Making Charts


sAngle ال بجعل قم arc ال خالل من كاملة دائرة لرسم :مالحظة*2 يساوي eAngle وال 0 يساوي Math.PI :^_^ معا السابقة األمثلة جميع لنشاهد واآلن،

من نقلها تم السابقة األمثلة جميع :2 مالحظةCanvas Deep Dive - chapter 2 Hands On: Making Charts

األفكار تطيبق على عملية فكرة فعليا يمثل الموضوع وهذا الفصل هذاالسابقة األمثلة وتطبيق الدورة، هذه من األول الفصل في تعلمناها التي

*^_..ذلك تنسى فال..مهم أمر هو بخطوة خطوة معنا والسيرعرض األمثلة

الدكتور عبدالرحمن ذاكر–فن الحياة

Image Fills


الخاصة الرسم طريقة عن الدورة بهذه األول الموضوع في تحدثنا لقد ،Canvas ال داخل األمور من الخ.. والخطوط والصور باألشكال

ال تعبة يمكنني كيف وهي أخرى نقطة الى لنتطرق نأتي واآلنCanvas وليكون مختلفة، أو متعددة أنماطا تتخذ بحيث بصورة

مع قبل من repeat ال إستخدمت هل بسالسة مفهوما األمر هذايمكنك تستخدمها لم أو إستخدمتها اذا ،]: ؟ css ال في الصور

هي ما لكن ،Canvas ال خالل من العملية هذه مشاهدة اآلن النتائج؟ هذه مشاهدة من ستمكننا التي الدالة

()createPattern :هو الجواب

Image Fills


createPattern(): اإلتجاه في العنصر لتكرار الدالة هذه تستخدم :هي له العامة والصيغة تحديده، يتم الذي

الصور، مثل تكراره المراد العنصر الى يشير :element ال*^_ آخر Canvas حتى أو والفيديو

.وعامودي أفقي تكرار وتعني اإلفتراضية، الحالة هي :repeat ال.فقط أفقي تكرار :repeat-x ال.فقط عامودي ترار :repeat-y ال- فقط واحدة مرة –تكراره دون العنصر رسم يتم :no-repeat ال

Image Fills


:مثال

P: تحميلها بعد الصورة ال تستخدم أن تنسى ال :* :األمثلة من مجموعة شاهد واآلن


Opacity


رسم ألي الشفافية مقدار في التحكم يمكنك Canvas ال خالل من الخاصية إستخدام خالل من ذلك ويكون ،Canvas ال داخل

globalAlpha _^*، هي العامة والصيغة:

القيمة هذه وتكون للصورة الشفافية مقدار الى تشير :number ال بدون –اإلفتراضية القيمة( 1.0 وال )تماما شفافة( 0.0 بين

*_^مثاال لنشاهد واآلن..)شفافية

Opacity


:مثال

شفافية تقل بحيث شفافيته، درجة تختلف مربع كل أن هنا الحظ *^_ الصفر من إقتربنا كلما المربع


Transforms


،CSS3 ال على سابقا شاهدوا أو عملوا الويب مطورين معظم ال وجود خالل من إستخدامها يمكننا التي الخصائص وشاهدوا

Transforms، ال إستخدام يمكننا –تقريبا –المفهوم بنفس وهنا خاصية ألي الرسم ويكون ،Canvas ال داخل Transforms ال

فهي Transforms ال عن يعرف ال ولمن ،*^_ 2D بها خاصة تحريك آخر، الى موقع من ما لعنصر نقل عمل لك تتيح خاصية الخ...العنصر وتكبير العنصر Transforms ال على العمل أثناء الدوال هذه إستخدام ويمكننا

:وهي

Transforms


(1translate(): ال داخل الدالة هذه تستخدم Canvas لتحديد داخل تحديدها يتم التي النقطة في )0,0( الرسم لبدء إنطالق نقطة الى إنطلق تعني وهنا ;c.translate(50,50) مثل الدالة هذه

50 النقطة , بعد ستأتي التي للرسمة اإلنطالق نقطة واجعلها 50... الدالة هذه

إزاحة على يحتوي رسمه سيتم الذي العنصر كان اذا :مالحظة فإنها ص، وال س المحور على بكسل 10 أنها ولنفرض معينة

هي الرسم إنطالق نقطة فيصبح الرسم إنطلق نقطة الى تضاف50 + 10 = 60

:المثال لنشاهد واآلن

Transforms


Transforms

(2rotate(): نقوم زاوية بمقدار الرسمة لتدوير الدالة هذه تستخدم خالل من Canvas بال التدوير ويكون بالدرجات، بتحديدها

ال تمثل بحيث .degrees*Math.PI/180 المعادلة هذهdegrees باي( الثابت ب نضربها ثم ومن المطلوبة، الزاوية–

آخر وبمعنى ،)وقطرها الدائرة محيط بين النسبة الى يشير وهو بتحرك نقوم ثم ومن معينة، رسمة وبداخلها دائرة ترسم أنك تخيل :المثال شاهد واآلن ... الدائرة داخل الرسمة هذه


دعاء

Transforms


(3scale(): رسمة حجم تكبير أو لتصغير الدالة هذه تستخدم بنائا الصورة لحجم المناقصة أو المضاعفة عملية وتتم معينة،

*^_ scale ال داخل وضعها يتم التي القيم على :مثاال لنشاهد واآلن

حجم بنفس البرتقالي اللون أن الحظ scale ال بسبب وذلك األزرق،

Transforms


(4transform قيم 6 من مكونة مصفوفة عن عبارة الدالة هذه :() وبمعنى الموضوع، هذا في سابقا تعلمناها التي الدوال مجموع تمثل,rotate ال كتابة يمكنني آخر scale, translate هذه خالل من

:هي لها العامة والصيغة فقط، الدالةc.transform(a,b,c,d,e,f);

a: ال المتغير هذا يمثل scale السيني للمحور b: ال المتغير هذا يمثل skew السيني للمحور c: ال المتغير هذا يمثل skew الصادي للمحور

d: ال المتغير هذا يمثل scale الصادي للمحورe: س للمحور معينة لنقطة المطلوبة اإلزاحة مقدار المتغير هذا يمثلf: ص للمحور معينة لنقطة المطلوبة اإلزاحة مقدار المتغير هذا يمثل

Transforms

:مثاال لنشاهد واآلن

ذلك وبعد المثال، لهذا جيدا انتبهعرض األمثلة *^_ هنا من األمثلة جميع شاهد


Clip


2 هناك الدالة، بهذه نبدأ أن قبل methods عليهما، نتعرف أن يجب :وهما

save(): الرسم، لعملية الحالي الوضع لحفظ الدالة هذه تستخدم تم التي الرسم لنقاط حفظ عملية عن نتحدث كأننا بآخر أو وبشكل ومن سابقا، رسمه تم ما على التأثير دون أخرى بعملية للقيام رسمها

تختفي أن دون ،()restore خالل من الحفظ مكان الى العودة ثم موضوع الى معا لنعود واآلن ،*^_ بإضافتها قمنا التي التعديالت

تطرقنا لماذا معا وسنشاهد ،*^_ Clip ال وهو P: اليوم لهذا الحلقةsave الى & restore الموضوع هذا في عملي بشكل ^_^

Clip


األصلي Canvas ال من جزء إلقتطاع Clip ال دالة تستخدمحال في جدا مفيد وهذا القطع، هذا حدود داخل رسمة أي تنفيذ ثم ومن أبسط وبعبارة والمستطيل، المثلث مثل متداخلين شكلين نرسم أن أردنا أو نطاق داخل نحدده الذي بالحجم شكل أي رسم وظيفتها الدالة هذه منطقة خارج سيعتبر Clip ال خارج جزء أي فإن ولهذا آخر، بعد

مثاال توضح التي الصورة شاهد ...الشاشة على يظهر ولن القطع :Clip ال إستخدام على

ستتم رسم عملية أي :مهمة مالحظةال نطاق ضمن ستكون ،clip كتابة بعد

Clip، طبيعي بشكل والعمل وللعودة save الدالة نستخدم & resote

Clip

:المثال


بعد التركيز على نتيجة المثال إنتقل للشرحة التالية لمشاهدة

:]الشيفرة البرمجة

Clip


البرمجية، الشيفرة الحظإضافة أثرت كيف وشاهد

شكل على c3.clip ال الشكل من كل في النتائج *^_ .. والثاني األول

فعليك الثالث، الشكل أما البرمجية الشيفرة كتابة

وفعليا أنت، به الخاصة هو به القيام عليك ما

برمجيين سطرين إضافةالثاني الشكل مثال على فقط جميع شاهد ذلك بعد..*^_

عرض األمثلة*^_: هنا من األمثلة

Events


مجموعة على أضافه جديد Event أي يملك ال Canvas ال مجموعة إستخدام يمكنك بل معها، التعامل يمكننا التي األحداث أي في تستخدمها كما touch ال أو mouse بال الخاصة األحداث

ال مع نتعامل أننا هي المهمة المالحظة لكن الويب، صفحة في مكانCanvas ال من مجموعة على يحتوي مستطيل أنه على px، وهذا

بالتأثير قمنا الذي الشكل هو ما معرفة على القدرة نملك ال أننا يعنيطريقة فقط يوضح والشرح المثال هذا :مالحظة .. Event بأي عليه

التي events ال لشرح أتطرق ولن الموضوع، مع التعامل فكرة أو.. سكربت الجافا في سابقا تعلمناها


سورة اإلخالص

Animating with requestAnimationFrame


حركة بناء الى الرسم مجرد من سننتقل الجميلة المرحلة هذه وفي اآلن وأول ،*^_ السابقة الرسومات من بتعلمه قمنا لما جميلة تفاعلية

هو بالحقيقة Animation ال أن هي معرفتها علينا يجب مالحظة لنا ليظهر مختلفة نقاط في وتكرارا مرارا نفسه الشكل رسم عن عبارة... ^_^ معين حركي شكل

؟ لحظة كل في الشكل إعادة يمكنني كيف واآلن ؟setInterval ال بإستخدام ذلك يكون هل ؟requestAnimationFrame ال دور وما



في رسمه يتم frame كم بمقدار Animation ال سرعة حساب يتم أجزاء برسم المباشرة يتم مرة كم آخر وبمعنى الواحدة، الثانيةN( الثانية أجزاء من جزء كل في تحريكه المراد الشكل mesc( ، بهذه تقوم فهي ،setInterval ال خالل من بذلك القيام ويمكن

األسلوب هذا لكن ،mesc ال على اعتمادا ما عمل لتكرار الوظيفة :التالي بالسرد نذكرها أسباب لعدة الصحيح األسلوب هو يكون لن األجهزة، جميع على السرعة بنفس بالرسم تقوم setInterval ال

وبغض اليوزر، قبل من المستخدم الجهاز طبيعة عن النظر بغض أم اليها وينظر أمامه الصفحة كانت ما اذا أو اليوزر يفعله عما النظر

أن أو فعالة ليس أنها نقول بل استخدامها، يمكننا ال أننا نقول ال وهنا... ال^_^... أخرى أدوات بوجود األفضل ليس أدائها



تم ،^_^ requestAnimationFrame ال دور يظهر وهنا كفائة أكثر Animation ال عملية من ليجعل API ال هذا إنشاء

في يأتي أصبح API ال هذا ،smooth الحركة ويجعل وفاعليةprefix ال إضافة يلزم لكن تلقائي، بشكل مضمنا الحديثة المتصحفات

prefix( معه المتصفح ليتعاطى like webkit, moz ..etc( في يعمل والذي المحترم Paul السيد قام اإلزعاج هذا ولنتجاوز

Google متصفح أدوات تطوير Chrome يختصر سكربت بكتابة الفانكشن هذا أخذ على بساطة بكل تقوم والفكرة العلمية، هذه علينا

شكل على اليه animation لل بكتابه قمنا الذي الفانكشن وإرسالReference، بعمل الفانكشن هذا ويقوم recursion ال رسم ليتم Animation تنفيذه المطلوب...



على الصفحة تحميل بعد Animation ال تنفيذ يتم األوقات أغلب في للمتصفح يعطي وهذا ذلك، بعد Animation ال ويبدأ المتصفح،

:المثال هذا لنشاهد واآلن.. Animation بال التحكم على أكبر قدرة



:التالي الشكل على ستكون السابق المثال مخرجات واآلن)Gif Image شكل على الشرائح استعرض Slide show(



ال شكل أن ستالحظ السابق المثال وتطبيق مشاهدة بعد :2 مثالAnimation لكن فقط، المستطيل حجم في زيادة عملية يشبه الناتج

!؟ المستطيل تحريك هو فعليا به نرغب ما المحور على حجمه يزداد السابق المثال في الشكل كان :مالحظة.الثانية من جزء 100 كل بكسل 5 بمقدار السيني

ال عملية فإن بطرحه قمنا الذي األول المثال في Clearing Animation– سهلة ستكون - الحالي المثال موضوع

]: المثال لنشاهد...*^_ clearRect ال استخدام خالل من وذلك



Gif Image استعرض على شكل Slide show :D



حركة Animation ال حركة كانت لقد السابقة األمثلة في :3 مثالمختلفة، مواقع في الشكل رسم إعادة مجرد فقط بالفعل وكانت بسيطة،

رأيكم ما ^_^ وتعقيدا احترافية أكثر Animation عمل نريد لكننا بذلك؟ )Gif( ]:بتطبيقهسنقومالذيالمثالنتيجةوشاهد]: معا لنبدأ



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

:التالية الصورةالتي المهام بدورة تخبرك الصورة فإن تالحظ كما

animation ال داخل frame كل في تنفيذها يجب والتحديث، اإلنشاء، عمليات هو الدورة ومحور Freame ال هذا في الرسم إنهاء ثم ومن والرسم.. حدى على جزئية كل ونشرح لنذهب واآلن^_^


إنشاء على Function ال هذا يقوم :createParticles )أ تعني Canvas )particles ال داخل الموجودة الجسيمات ،)canvas ال داخل رسمه يمكننا شكل أي بها وأقصد جسيمات،

بتحديد قمت فمثال أنت، تحديدها يمكنك أريده وما الشروط وطبيعة من والنص واللون السرعة

ارسالها ثم ومن مصفوفة خالل من معها التعامل يتم حتى

األخرى الدوال خالل :البرمجية الشيفرة شاهد




هذه تقوم جدا، بسيطة وظيفتها الدالة هذه :updateParticles )ب ذلك ويكون Canvas ال داخل مجسم كل موقع تحديث على الدالة لنا يظهر وبهذا الحالي، موقعه الى المجسم هذا سرعة إضافة خالل ]: Canvas ال داخل ألسفل األعلى من المتساقط الشكل :البرمجية الشيفرة شاهد



فإذا المجسم، موقع فحص على الدالة هذه تقوم :killParticles )جالدالة هذه تقوم Canvas ال أسفل وفي ظاهر غير المجسم أصبح هذا إنشاء سنعيد ألننا مهم وهذا )P: خدمته إنهاء ( المجسم قتل على

]: مجددا البداية موقع وإعطائه create ال خالل من مجددا المجسم

:البرمجية الشيفرة شاهد



المجسم رسم على بساطة بكل الدالة هذه تقوم :drawParticles )دال خالل من بإرساله قمنا الذي والنص اللون وتطبيق به نرغب الذي

Create ثم ومن للمجسم، الخلفية تفريغ بساطة بكل علمه ومبدأ ]: مجسم لكل مختلف موقع في مجددا الرسم :البرمجية الشيفرة شاهد

:األمثلة شاهد الشرح، هذا بعد




المثال هذا شاهد المخنلفة، األمثلة من للعديد استعراضنا وبعد.. واآلن ال لدورة والمتابعة اإلنطالق نقطة وهي الدورة، هذه في األخير

Canvas ال في التحكم من وتبدأ Animation لوحة خالل من نصدر أو ننتهي وحتى .. ^_^ األلعاب تصميم الى واإلنتقال المفاتيح

في وتستمر نفسك تطور أن منك نأمل المجال هذا في أخرى دورة لكل وإياكم هللا وفقنا ^_^ تعلمت بما العربي المحتوى وتثري التعلم^_^ خير


فن الحياة–الدكتور عبدالرحمن ذاكر

الخاتمة


“ Canvas“ وأخيرا، نكون قد انتهينا من هذه الدورة المتواضعة بفضل من هللا تعالى ورحمته وكرمه علينا، ونسأل هللا تعالى أن يوفقنا

لما يحب ويرضاه وأن ينال هذا الموضوع المتواضع إعجابكم وأن . يقدم لكم المفيد ولألمة اإلسالمية، وأن يوفقنا وإياكم لكل خير

اللهم اغفر لي ولوالدي وللمسلمين أحيائهم وأمواتهم إنك سميع عليم .اللهم آمين. رحيم قدير غفور شكور

اللهم صل وسلم وبارك على أكرم خلقك سيدنا دمحم صل هللا عليه وسلم. وعلى اله وصحبه وسلم ومن تبعهم بإحسان الى يوم الدين

الخاتمة


: يمكنكم الحصول على الدورات األخرى من الموقع اإللكترونيnees.com2www.

: الدورات التي يمكنكم الحصول عليهاHTML, HTML5, CSS, CSS3, PHP ADV 101

DRUPAL 7, JQUERY, ANGULAR, SASS, JSJSON, ES6, Bootstrap3, jQuery UI

كما يسرنا أن تطلعوا على المقاالت الموجودة على الموقع حيث.وهللا ولي التوفيق. نرجوا لكم أكبر فائدة ممكنة

http://www.2nees.com/�

http://www.2nees.com/�

Education

Canvas دورة باللغة العربية