Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

3.569 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

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

  1. 1. ����﷽ ‫ﺩﻭﺭﺓ‬Canvas–‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺃﻧﻳﺱ‬ ‫ﺗﻘﺩﻳﻡ‬2nees.com
  2. 2. ‫ﻣﺭﻓﻭﻉ‬ ‫ﺣﺩﻳﺙ‬
  3. 3. ‫ﺍﻟﻔﻬﺭﺱ‬ ‫ﺍﻟﻣﻘﺩﻣﺔ‬ ‫ﺍﻝ‬ ‫ﻫﻭ‬ ‫ﻣﺎ‬Canvas‫؟‬ ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬ ‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬SVG, CSS, DOM‫؟‬ ‫ﻟﻝ‬ ‫ﺍﻟﺩﺍﻋﻣﺔ‬ ‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬Canvas ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( Making Charts Image Fills Opacity Transforms Clip Events requestAnimationFrameAnimating with ‫ﺍﻟﺧﺎﺗﻣﺔ‬ ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  4. 4. ‫ﺍﻟﻣﻘﺩﻣﺔ‬ ‫ﺃﻧﻔﺳﻧﺎ‬ ‫ﺷﺭﻭﺭ‬ ‫ﻣﻥ‬ �‫ﺑﺎ‬ ‫ﻭﻧﻌﻭﺫ‬ ،‫ﻭﻧﺳﺗﻐﻔﺭﻩ‬ ‫ﻭﻧﺳﺗﻌﻳﻧﻪ‬ ‫ﻧﺣﻣﺩﻩ‬ ،� ‫ﺍﻟﺣﻣﺩ‬ ّ‫ﺇﻥ‬ ‫ﻫﺎﺩﻱ‬ ‫ﻓﻼ‬ ‫ﻳﺿﻠﻝ‬ ‫ﻭﻣﻥ‬ ،‫ﻟﻪ‬ ‫ﻣﺿﻝ‬ ‫ﻓﻼ‬ ‫ﷲ‬ ‫ﻳﻬﺩﻩ‬ ‫ﻣﻥ‬ ،‫ﺃﻋﻣﺎﻟﻧﺎ‬ ‫ﺳﻳﺋﺎﺕ‬ ‫ﻭﻣﻥ‬ ‫ﻋﺑﺩﻩ‬ ً‫ﺍ‬‫ﷴ‬ ‫ﺃﻥ‬ ‫ﻭﺃﺷﻬﺩ‬ ،‫ﻟﻪ‬ ‫ﺷﺭﻳﻙ‬ ‫ﻻ‬ ‫ﻭﺣﺩﻩ‬ ‫ﷲ‬ ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ‫ﺃﻥ‬ ‫ﻭﺃﺷﻬﺩ‬ ،‫ﻟﻪ‬ ‫ﻭﺻﺣﺑﻪ‬ ‫ﺁﻟﻪ‬ ‫ﻭﻋﻠﻰ‬ ‫ﻋﻠﻳﻪ‬ ‫ﻭﺳﻼﻣﻪ‬ ‫ﷲ‬ ‫ﺻﻠﻭﺍﺕ‬ ،‫ﻭﺭﺳﻭﻟﻪ‬.‫ﺑﻌﺩ‬ ‫ﺃﻣﺎ‬.. ‫ﺗﺗﺣﺩﺙ‬ ‫ﺟﺩﻳﺩﺓ‬ ‫ﺩﻭﺭﻩ‬ ‫ﻓﻲ‬ ،‫ﻭﻛﺭﻣﻪ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﻔﺿﻝ‬ ‫ﻣﺟﺩﺩﺍ‬ ‫ﻟﻛﻡ‬ ‫ﻧﻌﻭﺩ‬ ‫ﻓﺈﻧﻧﺎ‬ ‫ﺍﻝ‬ ‫ﻋﻥ‬Canvas‫ﺍﻝ‬ ‫ﻅﻬﻭﺭ‬ ‫ﻣﻧﺫ‬ ‫ﻣﺳﺗﺧﺩﻣﺎ‬ ‫ﻭﺃﺻﺑﺢ‬ ،‫ﺟﻠﻳﺎ‬ ‫ﻅﻬﺭ‬ ‫ﺍﻟﺫﻱ‬ HTML5‫ﺗﺻﻣﻳﻡ‬ ‫ﺣﻳﺏ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻭﻳﺏ‬ ‫ﻋﺎﻟﻡ‬ ‫ﻓﻲ‬ ‫ﻛﺑﻳﺭ‬ ‫ﺃﺛﺭ‬ ‫ﻟﻅﻬﻭﺭﻩ‬ ‫ﻭﻛﺎﻥ‬ ، ‫ﺍﻝ‬ ‫ﻭﺗﻁﻭﻳﺭ‬Animation‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﺭﺳﻡ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬ ،‫ﺍﻷﻟﻌﺎﺏ‬ ‫ﻭﺑﻧﺎء‬ ‫ﺍﻟﺑﻳﺎﻧﻳﺔ‬ ‫ﻭﺍﻟﻣﺧﻁﻁﺎﺕ‬...‫ﺑﻁﺭﻳﻘﺔ‬ ‫ﺍﻟﻣﻭﺍﺿﻳﻊ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻟﻰ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﻫﻧﺎ‬ ‫ﻭﺳﻧﻧﺗﻁﺭﻕ‬ ‫ﻭﺍﻵﻥ‬ ،‫ﻭﺍﻹﺛﺎﺭﺓ‬ ‫ﺍﻟﺗﺣﺩﻱ‬ ‫ﻳﻣﻸﻩ‬ ‫ﺟﺩﻳﺩ‬ ‫ﻁﺭﻳﻖ‬ ‫ﻋﻠﻰ‬ ‫ﻭﺇﻳﺎﻛﻡ‬ ‫ﺗﺿﻌﻧﺎ‬ ‫ﻣﺧﺗﺻﺭﺓ‬ ‫ﺳﻬﻠﺔ‬ ‫ﺍﻟﻣﺗﻭﺍﺿﻌﺔ‬ ‫ﺍﻟﺩﻭﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﺻﻔﺣﺎﺕ‬ ‫ﺍﻟﻰ‬ ‫ﻟﻧﻧﻁﻠﻖ‬ ‫ﺑﻧﺎ‬ ‫ﻫﻳﺎ‬... ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  5. 5. ‫ﺍﻟﻣﻘﺩﻣﺔ‬ ‫ﺍﻟﺩﻭﺭﺓ‬ ‫ﻣﺗﻁﻠﺑﺎﺕ‬: (1HTML (2JS)‫ﺟﺩﺍ‬ ‫ﻣﻬﻡ‬( (3CSS (4HTML5)‫ﺍﻟﺯﺍﻣﻳﺔ‬ ‫ﻭﻟﻳﺳﺕ‬ ‫ﻋﺎﻣﺔ‬ ‫ﻣﻌﺭﻓﺔ‬( ‫ﻣﻼﺣﻅﺎﺕ‬: •‫ﺍﻟﺗﻌﻠﻡ‬ ‫ﻓﻲ‬ ‫ﻣﻬﻡ‬ ‫ﻭﻫﺫﺍ‬ ،‫ﺑﻳﺩﻳﻙ‬ ‫ﻭﻛﺗﺎﺑﺗﻬﺎ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺟﻣﻳﻊ‬ ‫ﺗﻁﺑﻳﻖ‬ ‫ﻋﻠﻳﻙ‬ ‫ﻳﺟﺏ‬ ‫ﺍﻟﺩﻭﺭﺍﺕ‬ ‫ﻫﺫﻩ‬ ‫ﻟﻣﺛﻝ‬. •‫ﻣﻧﺎ‬ ‫ﻳﺗﻘﺑﻝ‬ ‫ﺃﻥ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﻧﺳﺄﻝ‬ ،‫ﻣﺟﺎﻧﻲ‬ ‫ﺑﺷﻛﻝ‬ ‫ﻟﻠﺟﻣﻳﻊ‬ ‫ﻣﻘﺩﻡ‬ ‫ﺍﻟﻌﻣﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻳﻧﺗﺞ‬ ‫ﻗﺩ‬ ‫ﺷﺭﻋﻪ‬ ‫ﻳﺧﺎﻟﻑ‬ ‫ﻓﻌﻝ‬ ‫ﺃﻱ‬ ‫ﻣﻥ‬ ‫ﷲ‬ ‫ﺍﻟﻰ‬ ‫ﺃﺑﺭﺉ‬ ‫ﻟﺫﻟﻙ‬ ،‫ﺃﻋﻣﺎﻟﻧﺎ‬ ‫ﻭﻣﻧﻛﻡ‬ ‫ﺍﻟﺣﺭﻭﻑ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻌﻠﻣﻛﻡ‬ ‫ﺟﺭﺍء‬ ‫ﻣﻥ‬.‫ﻓﺎﺷﻬﺩ‬ ‫ﺍﻟﻠﻬﻡ‬ ،‫ﺑﻠﻐﺕ‬ ‫ﻗﺩ‬ ‫ﺍﻟﻠﻬﻡ‬. ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  6. 6. ‫ﺍﻝ‬ ‫ﻫﻭ‬ ‫ﻣﺎ‬Canvas‫؟‬ ‫ﺍﻝ‬ ‫ﻣﻔﻬﻭﻡ‬ ‫ﺑﺳﺭﺩ‬ ‫ﺳﻧﻘﻭﻡ‬Canvas‫ﺍﻟﻰ‬ ‫ﺍﻷﻋﻡ‬ ‫ﻣﻥ‬ ‫ﻧﻘﺎﻁ‬ ‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﻟﻪ‬ ‫ﻭﺍﻟﺧﺎﺹ‬ ‫ﺍﻟﻌﺎﻡ‬ ‫ﺍﻟﻣﻔﻬﻭﻡ‬ ‫ﺍﻟﻰ‬ ‫ﻧﺻﻝ‬ ‫ﺣﺗﻰ‬ ‫ﺍﻷﺧﺹ‬^_^ ‫ﺍﻝ‬Canvas‫ﻫﻭ‬API‫ﺍﻝ‬ ‫ﺍﻟﻰ‬ ‫ﺣﺩﻳﺛﺎ‬ ‫ﺃﺿﻳﻑ‬HTML‫ﺩﻋﻣﻪ‬ ‫ﻭﺗﻡ‬ ‫ﺍﻟﺭﺋﻳﺳﻳﺔ‬ ‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬ ‫ﺟﻝ‬ ‫ﻣﻥ‬)IE9+(‫ﺭﺳﻡ‬ ‫ﻛﻭﺳﻳﻠﺔ‬ ‫ﻭﻳﺳﺗﺧﺩﻡ‬ ‫ﻋﻠﻰ‬ ‫ﻣﺑﺎﺷﺭﺓ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺍﻹﺿﺎﻓﺔ‬ ‫ﻫﺫﻩ‬ ‫ﻟﻧﺎ‬ ‫ﺗﺗﻳﺢ‬ ‫ﻳﺣﻳﺙ‬ ،‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻳﺔ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﻷﻱ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﺑﺩﻭﻥ‬ ‫ﺍﻟﻣﺗﺻﻔﺢ‬)plug-in(‫ﺃﻭ‬JAVA‫ﻛﻣﺎ‬ ، ‫ﺍﻟﻠﻭﺣﻲ‬ ‫ﺃﻭ‬ ‫ﺍﻟﻣﻛﺗﺑﻲ‬ ‫ﺍﻟﺟﻬﺎﺯ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻌﻣﻝ‬ ‫ﺍﻹﺿﺎﻓﺔ‬ ‫ﻟﻬﺫﻩ‬ ‫ﻳﻣﻛﻥ‬... ‫ﺍﻝ‬Canvas‫ﻫﻭ‬API‫ﺍﻟﺧﻁﻭﻁ‬ ‫ﻟﺭﺳﻡ‬ ‫ﺍﻟﻣﺗﺻﻔﺢ‬ ‫ﻳﺳﺗﺧﺩﻣﻪ‬ ‫ﻭﺍﻟﻧﺻﻭﺹ‬ ‫ﻭﺍﻟﺻﻭﺭ‬ ‫ﻭﺍﻷﺷﻛﺎﻝ‬..‫ﻣﻥ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻣﻭﻗﻊ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻭﻳﺗﻡ‬ ،‫ﺍﻟﺦ‬ ‫ﺑﻳﺎﻧﺎﺕ‬ ‫ﻣﻥ‬ ‫ﻧﺣﻥ‬ ‫ﻧﻘﺩﻣﻪ‬ ‫ﻣﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺑﻧﺎﺋﺎ‬ ‫ﺍﻟﻣﺗﺻﻔﺢ‬ ‫ﺧﻼﻝ‬. ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  7. 7. ‫ﺍﻝ‬ ‫ﻫﻭ‬ ‫ﻣﺎ‬Canvas‫؟‬ ‫ﺍﻝ‬Canvas‫ﻫﻭ‬HTML5 tag‫ﺍﻟﺭﺳﻭﻣﺎﺕ‬ ‫ﻟﺭﺳﻡ‬ ‫ﻳﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﺳﻛﺭﺑﺕ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻣﺑﺎﺷﺭ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺍﻟﻣﺧﺗﻠﻔﺔ‬)‫ﺳﻛﺭﺑﺕ‬ ‫ﺍﻟﺟﺎﻓﺎ‬ ‫ﻋﺎﺩﺓ‬(، ،‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻟﻣﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﻘﻠﻡ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺭﻳﺷﺔ‬ ‫ﻫﻭ‬ ‫ﺍﻟﻣﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﺳﻛﺭﺑﺕ‬ ‫ﻭﻳﻛﻭﻥ‬ ‫ﺍﻝ‬ ‫ﻭﻳﻛﻭﻥ‬Canvas tag‫ﺍﻟﻠﻭﺣﺔ‬ ‫ﻓﻘﻁ‬)‫ﺍﻹﻧﺎء‬(،‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﺧﺎﺹ‬ ،‫ﻧﻔﺳﻪ‬ ‫ﺗﻠﻘﺎء‬ ‫ﻣﻥ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻋﻠﻰ‬ ‫ﻗﺩﺭﺓ‬ ‫ﺃﻭ‬ ‫ﻣﻳﺯﺓ‬ ‫ﺃﻱ‬ ‫ﻟﻭﺣﺩﻩ‬ ‫ﻳﺣﺗﻭﻱ‬ ‫ﻭﻻ‬ ‫ﺍﻝ‬ ‫ﻧﺳﺗﺧﺩﻡ‬ ‫ﺃﻧﻧﺎ‬ ‫ﺍﻟﻰ‬ ‫ﻧﺻﻝ‬ ‫ﻭﻫﻧﺎ‬Canvas‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﻛﺈﻧﺎء‬ ‫ﺇﺿﺎﻓﺗﻬﺎ‬ ‫ﺗﻡ‬ ‫ﻣﺎ‬ ‫ﻫﻲ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻳﺔ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻭﺃﻭﺍﻣﺭ‬ ،‫ﺳﻛﺭﺑﺕ‬ ‫ﺍﻟﺟﺎﻓﺎ‬ ‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻳﺗﻡ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺃﻥ‬ ‫ﻋﻠﻣﺎ‬ ،‫ﺍﻟﺭﺳﻡ‬ ‫ﻣﻥ‬ ‫ﻟﺗﻣﻛﻧﻧﺎ‬Pixels. ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  8. 8. ‫ﺍﻝ‬ ‫ﻫﻭ‬ ‫ﻣﺎ‬Canvas‫؟‬ ‫ﻣﻬﻣﺔ‬ ‫ﻣﻼﺣﻅﺔ‬:‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﺍﻷﺧﻳﺭ‬ ‫ﺍﻟﺗﻌﺭﻳﻑ‬ ‫ﻓﻲ‬ ‫ﺫﻛﺭﻧﺎ‬Canvas‫ﻳﻘﻭﻡ‬ ‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺭﺳﻭﻣﺎﺕ‬ ‫ﺭﺳﻡ‬ ‫ﻋﻠﻰ‬Pixels)‫ﺍﻟﺿﻭﺋﻳﺔ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺃﻱ‬ ‫ﻋﺭﺽ‬ ‫ﺷﺎﺷﺔ‬ ‫ﺃﻱ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻣﻭﺟﻭﺩﺓ‬(‫ﺗﻣﻠﻙ‬ ‫ﻻ‬ ‫ﺑﻬﺫﺍ‬ ‫ﻭﻫﻲ‬ ،Shapes‫ﺃﻭ‬ Vectors‫ﺗﻣﻠﻙ‬ ‫ﻭﻻ‬ ،object‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﺗﺣﻛﻡ‬ ‫ﺧﻼﻟﻪ‬ ‫ﻣﻥ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺍﻟﻧﺎﺗﺞ‬ ‫ﺍﻟﻧﻬﺎﺋﻲ‬)‫ﺃﻗﺻﺩ‬ ‫ﻭﻫﻧﺎ‬event handlers(‫ﺗﻡ‬ ‫ﺭﺳﻣﺔ‬ ‫ﻓﻘﻁ‬ ‫ﻫﻲ‬ ، ‫ﺑﺎﻟﺷﺎﺷﺔ‬ ‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻟﺿﻭﺋﻳﺔ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﻋﻠﻰ‬ ‫ﺭﺳﻣﻬﺎ‬. )‫ﺍﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻁﺑﻌﺎ‬event handlers‫ﺃﺧﺫ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻋﻥ‬ ‫ﻳﺧﺗﻠﻑ‬ ‫ﺑﻭﺟﻭﺩ‬ ‫ﺍﻹﻋﺗﺑﺎﺭ‬Animation‫ﻟﻝ‬canvas( ‫ﻳﻛﻭﻥ‬ ‫ﻟﻥ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺃﻥ‬ ‫ﻭﻻﺣﻅ‬Vectors‫ﻋﻣﻝ‬ ‫ﻋﻧﺩ‬ ‫ﺫﻟﻙ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺗﺣﻘﻖ‬ ‫ﻭﻳﻣﻛﻧﻙ‬ zoom‫ﺑﺈﻧﺷﺎﺋﻪ‬ ‫ﻗﻣﺕ‬ ‫ﻣﺛﻼ‬ ‫ﻟﻣﺭﺑﻊ‬..‫ﺗﺣﻛﻲ‬ ‫ﺭﺡ‬)‫ﺑﺑﻛﺳﻝ‬: (P ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  9. 9. ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬SVG, CSS, DOM‫؟‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﻁﺭﻕ‬ ‫ﻋﺩﺓ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ،‫ﺍﻟﻣﻭﺍﻗﻊ‬ ‫ﺗﺻﻣﻳﻡ‬ ‫ﻣﺟﺎﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻝ‬ ‫ﻫﻲ‬ ‫ﺍﻟﻁﺭﻕ‬ ‫ﻫﺫﻩ‬ ،‫ﺍﻟﻣﺗﺻﻔﺢ‬CSS, DOM animation, Svg ‫ﺍﻝ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬canvas.. 1(‫ﺍﻝ‬css:‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻙ‬css‫ﺭﺳﻡ‬ ‫ﻣﺛﻝ‬ ‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﺑﻌﺽ‬ ‫ﻟﺭﺳﻡ‬ ‫ﻟﻌﻧﺎﺻﺭ‬ ‫ﺗﻧﺳﻳﻖ‬ ‫ﻋﻣﻠﻳﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻭﺍﻗﻊ‬ ‫ﻓﻲ‬ ‫ﻟﻛﻧﻬﺎ‬ ،‫ﻣﺎء‬ ‫ﻗﻁﺭﺓ‬DOM ‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﺑﻣﺎ‬ ،‫ﺁﺧﺭ‬ ‫ﺃﻣﺭ‬ ‫ﺍﻟﻰ‬ ‫ﻳﻘﻭﺩﻧﺎ‬ ‫ﻭﻫﺫﺍ‬ ،‫ﻟﺩﻱ‬ ‫ﻣﻭﺟﻭﺩﺓ‬Canvas ‫ﻟﻝ‬ ‫ﻳﻣﻛﻥ‬ ‫ﻓﻼ‬ ،‫ﺑﺎﻟﺑﻛﺳﻝ‬ ‫ﺭﺳﻡ‬ ‫ﻭﺳﻳﻠﺔ‬ ‫ﻋﻥ‬ ‫ﻋﺑﺎﺭﺓ‬CSS،‫ﺍﻟﻳﻪ‬ ‫ﺍﻟﻭﺻﻭﻝ‬ ‫ﻟﻳﺱ‬ ‫ﻓﻬﻭ‬DOM)‫ﺍﻟﻣﺭﺳﻭﻡ‬ ‫ﻟﻠﻌﻧﺻﺭ‬(‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻙ‬ ‫ﻟﻛﻥ‬ border‫ﺃﻭ‬background‫ﺍﻝ‬ ‫ﻟﺫﺍﺕ‬Canvas..‫ﻣﺛﺎﻻ‬ ‫ﻟﻧﺷﺎﻫﺩ‬.. ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  10. 10. ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬SVG, CSS, DOM‫؟‬ ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻣﺭﺳﻭﻣﺔ‬ ‫ﺍﻟﻘﻁﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﻻﺣﻅ‬ ‫ﺍﻝ‬css...‫ﻋﻣﻠﻳﺔ‬ ‫ﻓﻌﻼ‬ ‫ﺃﻧﻬﺎ‬ ‫ﻭﻻﺣﻅ‬ ‫ﻟﻠﻌﻧﺎﺻﺭ‬ ‫ﺗﻧﺳﻳﻖ‬^_^
  11. 11. ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬SVG, CSS, DOM‫؟‬ 2(‫ﺍﻝ‬SVG:‫ﻋﻥ‬ ‫ﻋﺑﺎﺭﺓ‬vector API‫ﻟﻛﻝ‬ ،‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﻟﺭﺳﻡ‬ ‫ﻳﺳﺗﺧﺩﻡ‬ ‫ﺍﻝ‬ ‫ﻣﻧﻬﺎ‬ ‫ﺷﻛﻝ‬object‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻣﻥ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﻭﻫﺫﺍ‬ ،‫ﺑﻬﺎ‬ ‫ﺍﻟﺧﺎﺹ‬ event handler‫ﻟﻭ‬ ‫ﺫﻟﻙ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬ ،‫ﺍﻟﻣﺭﺳﻭﻣﺔ‬ ‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﻟﻬﺫﻩ‬ ‫ﺑﻌﻣﻝ‬ ‫ﻗﻣﺕ‬zoom in‫ﺍﻷﺻﻠﻲ‬ ‫ﺑﺷﻛﻠﻪ‬ ‫ﻓﺳﻳﺑﻘﻰ‬ ‫ﺍﻟﻧﺎﺗﺞ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻏﺑﺎﺵ‬ ‫ﺩﻭﻥ‬)‫ﻭﻣﺗﺟﻬﺎﺕ‬ ‫ﺯﻭﺍﻳﺎ‬ ‫ﻋﻥ‬ ‫ﻧﺗﺣﺩﺙ‬ ‫ﻷﻧﻧﺎ‬(‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻛﻥ‬ ، Canvas‫ﺑﻛﺳﻠﺔ‬ ‫ﻋﻣﻠﻳﺔ‬ ‫ﺳﺗﺣﺩﺙ‬)pixelated–‫ﻋﻠﻰ‬ ‫ﺗﺷﻭﻳﺵ‬ ‫ﺍﻟﺿﻭﺋﻳﺔ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺷﻛﻝ‬-(‫ﺍﻟﺷﻛﻝ‬ ‫ﻟﻬﺫﺍ‬.. 3(Dom Animation:‫ﺗﻌﺭﻳﻑ‬ ‫ﻋﻠﻰ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻘﻭﻡ‬object‫ﻟﻛﻝ‬ ‫ﺗﺣﺭﻳﻙ‬ ‫ﺃﻭ‬ ‫ﺭﺳﻡ‬ ‫ﻣﻥ‬ ‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺗﻔﺎﻋﻝ‬ ‫ﻭﻳﺗﻡ‬ ،‫ﺍﻟﺷﺎﺷﺔ‬ ‫ﻓﻲ‬ ‫ﻋﻧﺻﺭ‬ ‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺗﻌﺎﻣﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬css‫ﻭﺍﻝ‬js!!..... ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  12. 12. ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬SVG, CSS, DOM‫؟‬ ‫ﺑﻪ؟‬ ‫ﺃﺗﺣﺩﺙ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﻛﻼﻡ‬ ‫ﻫﺫﺍ‬ ‫ﻣﺎ‬! ‫ﺍﻝ‬ ‫ﻧﺳﺗﺧﺩﻡ‬ ‫ﻫﻝ‬ ‫؟‬ ‫ﻳﻌﻧﻲ‬ ‫ﻣﺎﺫﺍ‬css‫ﺍﻝ‬ ‫ﺃﻡ‬SVG‫ﺍﻝ‬ ‫ﺃﻡ‬Dom Animation‫ﺍﻝ‬ ‫ﺃﻡ‬Canvas‫؟؟؟‬ ‫؟‬ ‫ﺻﺣﻳﺢ‬ ‫ﺍﻹﺳﺗﺧﺩﺍﻡ‬ ‫ﻫﺫﺍ‬ ‫ﻳﻛﻭﻥ‬ ‫ﻭﻣﺗﻰ‬ ‫ﻭﺃﻳﻥ‬!! ‫ﺃﻭﻻ‬:‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﺻﺩﻳﻘﻲ‬ ‫ﺗﻌﻠﻡ‬ ‫ﺃﻥ‬ ‫ﻳﺟﺏ‬Canvas‫ﻫﻭ‬Lowers Level ‫ﻟﻝ‬ ‫ﺑﺎﻟﻧﺳﺑﺔ‬SVG, CSS, DOM‫ﺃﻛﺑﺭ‬ ‫ﻗﺩﺭﺓ‬ ‫ﻳﻌﻁﻳﻙ‬ ‫ﻓﻬﻭ‬ ‫ﻭﻟﻬﺫﺍ‬ ، ‫ﺍﻟﻰ‬ ‫ﻳﺣﺗﺎﺝ‬ ‫ﺍﻟﻭﻗﺕ‬ ‫ﺑﺫﺍﺕ‬ ‫ﻟﻛﻧﻪ‬ ،‫ﺃﻗﻝ‬ ‫ﺫﺍﻛﺭﺓ‬ ‫ﻭﻳﺳﺗﺧﺩﻡ‬ ،‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﺗﺣﻛﻡ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻷﺧﺭﻯ‬ ‫ﺍﻟﻁﺭﻕ‬ ‫ﻣﻥ‬ ‫ﺃﻛﺑﺭ‬ ‫ﺑﺭﻣﺟﻳﺔ‬ ‫ﺷﻳﻔﺭﺓ‬^_^. ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  13. 13. ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬SVG, CSS, DOM‫؟‬ ‫ﺛﺎﻧﻳﺎ‬:‫ﺍﻝ‬ ‫ﻧﺳﺗﺧﺩﻡ‬SVG‫ﻟﺩﻳﻧﺎ‬ ‫ﻳﺗﻭﻓﺭ‬ ‫ﻋﻧﺩﻣﺎ‬shape‫ﺟﻠﺑﻪ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺟﺎﻫﺯ‬ ‫ﺍﻟﺧﺭﺍﺋﻁ‬ ‫ﺫﻟﻙ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺃﺷﻬﺭ‬ ‫ﻭﻣﻥ‬ ،‫ﺍﻟﻌﺭﺽ‬ ‫ﺷﺎﺷﺔ‬ ‫ﺍﻟﻰ‬maps، ‫ﺑﺭﻧﺎﻣﺞ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬ ‫ﺍﻟﺧﺭﻳﻁﺔ‬ ‫ﺭﺳﻡ‬ ‫ﻓﻳﺗﻡ‬Adobe Illustrator‫ﺛﻡ‬ ‫ﻭﻣﻥ‬ ‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺗﺻﺩﻳﺭﻩ‬ ‫ﻳﺗﻡ‬SVG‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻛﺛﻳﺭ‬ ‫ﻭﻏﻳﺭﻫﺎ‬.. ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  14. 14. ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬SVG, CSS, DOM‫؟‬ ‫ﺛﺎﻟﺛﺎ‬:‫ﺍﻝ‬ ‫ﻧﺳﺗﺧﺩﻡ‬css‫ﺃﻭ‬DOM‫ﻛﺑﻳﺭﺓ‬ ‫ﻣﺳﺎﺣﺔ‬ ‫ﻟﺩﻳﻧﺎ‬ ‫ﻳﺗﻭﺍﺟﺩ‬ ‫ﻋﻧﺩﻣﺎ‬ ‫ﻋﻧﺩ‬ ‫ﺃﻭ‬ ،‫ﺍﻟﻣﺳﺎﺣﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻫﺫﺍ‬ ‫ﻭﺗﺣﺭﻳﻙ‬ ‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﻭﻧﺭﻏﺏ‬ ‫ﺛﺎﺑﺗﺔ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬ ‫ﺭﻏﺑﺗﻧﺎ‬3D transforms‫ﺍﻷﻛﺛﺭ‬ ‫ﺍﻟﻧﻭﻉ‬ ‫ﻫﺫﺍ‬ ‫ﻳﻛﻭﻥ‬ ‫ﻭﻗﺩ‬ ، ‫ﺭﺳﻡ‬ ‫ﻳﺗﻡ‬ ‫ﺑﺣﻳﺙ‬ ،‫ﻋﺎﻡ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺍﻟﻣﻁﻭﺭﻳﻥ‬ ‫ﻷﻏﻠﺏ‬ ‫ﻭﺍﺳﺗﺧﺩﺍﻣﺎ‬ ‫ﺷﻳﻭﻋﺎ‬ ‫ﺍﻝ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬ ‫ﻭﻏﻳﺭﻫﺎ‬ ‫ﺍﻟﺗﺄﺛﻳﺭﺍﺕ‬CSS‫ﺍﻝ‬ ‫ﺑﻌﻣﻝ‬ ‫ﻳﻘﻭﻡ‬ ‫ﻭﺍﻟﻛﺛﻳﺭ‬ Animation‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬DOM‫ﺍﻝ‬ ‫ﺩﺧﻭﻝ‬ ‫ﻣﻊ‬ ‫ﺧﺻﻭﺻﺎ‬ ، Parallax Scrolling‫ﺍﻝ‬ ‫ﺩﺧﻭﻝ‬ ‫ﻭﺑﻌﺩ‬ ،‫ﺍﻵﻥ‬ ‫ﻟﻛﻥ‬ ،HTML5‫ﻭﺗﻁﻭﺭ‬ ، ‫ﺍﻷﻓﺿﻝ‬ ‫ﺍﻷﺳﻠﻭﺏ‬ ‫ﻋﻥ‬ ‫ﻳﺑﺣﺛﻭﻥ‬ ‫ﺍﻟﻧﺷﻁﻳﻥ‬ ‫ﺍﻟﻣﻁﻭﺭﻳﻥ‬ ‫ﺃﺻﺑﺢ‬ ،‫ﺍﻟﻌﺭﺽ‬ ‫ﺗﻘﻧﻳﺎﺕ‬ ‫ﺑﻳﻥ‬ ‫ﺍﻹﺧﺗﻼﻓﺎﺕ‬ ‫ﻋﻥ‬ ‫ﻋﺎﻡ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺑﻌﺽ‬ ‫ﺑﺗﻔﺻﻳﻝ‬ ‫ﻗﻣﻧﺎ‬ ‫ﻭﻟﻬﺫﺍ‬ ،‫ﺟﺯﺋﻳﺔ‬ ‫ﻟﻛﻝ‬ ‫ﻭﺍﻟﺭﺳﻡ‬ ‫ﺍﻟﺗﺄﺛﻳﺭ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻁﺭﻕ‬ ‫ﻫﺫﻩ‬... ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  15. 15. ‫ﻟﻝ‬ ‫ﺍﻟﺩﺍﻋﻣﺔ‬ ‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬Canvas ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻟﺭﺋﻳﺳﻳﺔ‬ ‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬ ‫ﻣﻌﻅﻡ‬ ‫ﺃﻥ‬ ‫ﻫﻧﺎ‬ ‫ﻻﺣﻅ‬ ‫ﺍﻝ‬ ‫ﺗﺩﻋﻡ‬ ‫ﺍﻟﺗﺷﻐﻳﻝ‬ ‫ﻭﺃﻧﻅﻣﺔ‬Canvas ،‫ﻟﻠﺭﺳﻡ‬ ‫ﻭﻣﺩﻋﻭﻣﺔ‬ ‫ﺟﻳﺩﺓ‬ ‫ﻭﺳﻳﻠﺔ‬ ‫ﻓﻬﻭ‬ ‫ﻭﻟﺫﻟﻙ‬ ‫ﺃﺟﻬﺯﺓ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻘﺗﺻﺭ‬ ‫ﻻ‬ ‫ﺍﻟﺩﻋﻡ‬ ‫ﻫﺫﺍ‬ ‫ﺃﻥ‬ ‫ﻛﻣﺎ‬ ‫ﻛﺫﻟﻙ‬ ‫ﻳﺷﻣﻝ‬ ‫ﺑﻝ‬ ،‫ﺍﻟﻼﺑﺗﻭﺏ‬ ‫ﺃﻭ‬ ‫ﺍﻟﻣﻛﺗﺏ‬ ‫ﺳﻁﺢ‬ ‫ﺍﻟﺫﻛﻳﺔ‬ ‫ﺍﻟﻬﻭﺍﺗﻑ‬..._^*
  16. 16. ‫ﺍﻟﻔﺎﺗﺣﺔ‬ ‫ﺳﻭﺭﺓ‬–‫ﺍﻟﻛﺭﻳﻡ‬ ‫ﺍﻟﻘﺭﺁﻥ‬–‫ﺍﻟﻣﺯﻳﺩ‬‫ﻫﻧﺎ‬ ‫ﻣﻥ‬
  17. 17. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻋﻥ‬ ‫ﺳﺎﺑﻘﺎ‬ ‫ﺗﺣﺩﺛﻧﺎ‬Canvas‫ﻣﻥ‬ ‫ﻭﻳﻣﻛﻧﻧﺎ‬ ،‫ﺳﻬﻠﺔ‬ ‫ﺭﺳﻡ‬ ‫ﻭﺳﻳﻠﺔ‬ ‫ﻗﺩ‬ ‫ﺳﺎﺑﻘﺎ‬ ‫ﻛﻧﺕ‬ ‫ﻭﺇﻥ‬ ،‫ﺳﻬﻭﻟﺔ‬ ‫ﺑﻛﻝ‬ ‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻳﺔ‬ ‫ﺍﻟﺭﺳﻭﻣﺎﺕ‬ ‫ﺇﻧﺷﺎء‬ ‫ﺧﻼﻟﻬﺎ‬ ‫ﺍﻟﺟﺎﻓﺎ‬ ‫ﺃﻭ‬ ‫ﺍﻟﻔﻼﺵ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻲ‬ ‫ﺷﻛﻝ‬ ‫ﺃﻱ‬ ‫ﺑﺭﺳﻡ‬ ‫ﻗﻣﺕ‬2D، ‫ﺃﻳﺿﺎ‬ ‫ﻫﻧﺎ‬ ‫ﺇﻧﺷﺎﺋﻪ‬ ‫ﺗﺳﺗﻁﻳﻊ‬ ‫ﺃﻥ‬ ‫ﺑﻙ‬ ‫ﻓﻳﻔﺗﺭﺽ‬^_^‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻓﻳﻣﻛﻧﻙ‬ ، Fill and stroke color‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬ ،‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﺭﺳﻡ‬ ‫ﺛﻡ‬ ‫ﻭﻣﻥ‬ ، ‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺗﻧﻔﻳﺫﻫﺎ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻣﺎﺕ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻣﻥ‬ ‫ﻣﺟﻣﻭﻋﺔ‬ Canvas‫ﻟﻣﺎ‬ ‫ﺍﻟﻌﻣﻠﻳﺔ‬ ‫ﻭﺍﻟﺗﺟﺭﺑﺔ‬ ‫ﻭﺗﻁﺑﻳﻘﻬﺎ‬ ‫ﺑﺎﻷﻣﺛﻠﺔ‬ ‫ﺍﻹﻫﺗﻣﺎﻡ‬ ‫ﻣﻧﻙ‬ ‫ﺃﺭﺟﻭ‬ ‫ﻛﻣﺎ‬ ، ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ،‫ﺍﻟﺧﺻﺎﺋﺹ‬ ‫ﻟﺷﺭﺡ‬ ‫ﺍﻟﺗﻁﺭﻕ‬ ‫ﻫﻧﺎ‬ ‫ﻭﺳﻳﺗﻡ‬ ،‫ﺫﻛﺭﻩ‬ ‫ﻳﺗﻡ‬ ‫ﺗﻠﻳﻪ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻓﻲ‬ ‫ﺗﻌﺎﺩ‬ ‫ﻟﻥ‬ ،‫ﻣﺛﺎﻝ‬ ‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﺷﺭﺣﻬﺎ‬_^... *‫ﻟﻧﻧﻁﻠﻖ‬ ‫ﻭﺍﻵﻥ‬ ‫ﷲ‬ ‫ﺑﺭﻛﺔ‬ ‫ﻋﻠﻰ‬^_^ ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  18. 18. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﻣﺛﺎﻝ‬1:‫ﺑﺭﺳﻡ‬ ‫ﺍﻵﻥ‬ ‫ﺳﻧﻘﻭﻡ‬rectangle‫ﻋﻣﻠﻳﺔ‬ ‫ﺳﺗﺗﻡ‬ ‫ﻛﻳﻑ‬ ‫ﻭﻟﻧﺷﺎﻫﺩ‬ ، ‫ﻫﻧﺎ‬ ‫ﺍﻟﺭﺳﻡ‬: ‫ﻣﻼﺣﻅﺔ‬:getContext():‫ﺍﻝ‬ ‫ﻹﺭﺟﺎﻉ‬ ‫ﺗﺳﺗﺧﺩﻡ‬ ‫ﺩﺍﻟﺔ‬ ‫ﻫﻲ‬Object ‫ﺍﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﻭﺍﻟﺩﻭﺍﻝ‬ ‫ﺍﻟﺧﺻﺎﺋﺹ‬ ‫ﻳﺩﻋﻡ‬ ‫ﺍﻟﺫﻱ‬Canvas‫ﻫﺫﺍ‬ ‫ﻭﻳﺗﻡ‬ ، ‫ﺍﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻧﺣﺻﻝ‬ ‫ﻋﻧﺩﻣﺎ‬Canvas‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻣﺭﺍﺩ‬Selector ‫ﺍﻝ‬ ‫ﻣﺛﻝ‬ID‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﺍﺳﺗﺧﺩﺍﻡ‬ ‫ﺛﻡ‬ ‫ﻭﻣﻥ‬ ،getContext(). ‫ﻣﻼﺣﻅﺔ‬2:getContext(“2D”)‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﺩﻭﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻟﺗﺣﺩﻳﺩ‬ ‫ﺗﺳﺗﺧﺩﻡ‬ ‫ﻭﺍﻟﻧﺻﻭﺹ‬ ‫ﺍﻟﺧﻁﻭﻁ‬ ‫ﺭﺳﻡ‬ ‫ﻣﺛﻝ‬ ،‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻲ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺗﺧﺹ‬ ‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬ ‫ﻭﺍﻟﺩﻭﺍﺋﺭ‬..‫ﺍﻟﺦ‬. ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  19. 19. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  20. 20. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬2: ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬
  21. 21. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻝ‬ ‫ﻓﺈﻥ‬ ،‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻓﻲ‬ ‫ﺷﺎﻫﺩﻧﺎ‬ ‫ﻛﻣﺎ‬Canvas‫ﺭﺳﻡ‬ ‫ﻳﺩﻋﻡ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺭﺳﻣﻪ‬ ‫ﻳﺗﻡ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﻭﺣﻳﺩ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻭﻫﻭ‬ ،‫ﻣﺑﺎﺷﺭﺓ‬ ‫ﺍﻟﻣﺳﺗﻁﻳﻝ‬ ‫ﺷﻛﻝ‬ ‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﻣﺑﺎﺷﺭ‬Canvas‫ﺏ‬ ‫ﺑﺫﻟﻙ‬ ‫ﺍﻟﻘﻳﺎﻡ‬ ‫ﻋﻠﻳﻙ‬ ‫ﺃﺧﺭﻯ‬ ‫ﺃﺷﻛﺎﻝ‬ ‫ﻭﻟﺭﺳﻡ‬ ، ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻭﺫﻟﻙ‬ ،‫ﻧﻔﺳﻙ‬Path^_^‫ﻭﺍﻝ‬ ،Paths‫ﻫﻲ‬ ‫ﺍﻟﻣﺳﺗﻘﻳﻣﺔ‬ ‫ﺍﻟﺧﻁﻭﻁ‬ ‫ﻣﻥ‬ ‫ﻣﺟﻣﻭﻋﺔ‬ ‫ﻣﻥ‬ ‫ﺇﻧﺷﺎﺋﻬﺎ‬ ‫ﻳﺗﻡ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﻭﺍﻟﻣﻧﺣﻧﻳﺔ‬^_^‫ﻣﺛﻝ‬ ،: ‫ﻧﻛﺗﺏ‬ ‫ﺃﻥ‬ ‫ﺭﺃﻳﻙ‬ ‫ﻣﺎ‬ ‫ﻭﺍﻵﻥ‬ ‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﺍﻟﺷﻛﻝ؟‬ ‫ﺑﻬﺫﺍ‬
  22. 22. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬3: ‫ﻫﺫﻩ‬ ‫ﺷﺎﻫﺩ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﻗﻡ‬ ‫ﺛﻡ‬ ‫ﻭﻣﻥ‬ ‫ﻭﺷﺎﻫﺩ‬ ،‫ﺑﺗﻁﺑﻳﻘﻬﺎ‬ ‫ﺫﻟﻙ‬ ‫ﻭﺑﻌﺩ‬ ،‫ﺍﻟﻧﺗﻳﺟﺔ‬ ‫ﻟﻠﺷﺭﻳﺣﺔ‬ ‫ﺇﻧﺗﻘﻝ‬ ‫ﺣﺗﻰ‬ ‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﻣﺎ‬ ‫ﻧﺗﺩﺍﺭﺱ‬ ‫ﻛﺗﺎﺑﺗﻪ‬ ‫ﺗﻣﺕ‬_^*
  23. 23. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﺷﺭﺡ‬: beginPath():‫ﺍﻝ‬ ‫ﻧﺧﺑﺭ‬ ‫ﻧﺣﻥ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬Canvas‫ﺃﻧﻧﺎ‬ ‫ﺑﺭﺳﻡ‬ ‫ﺳﻧﻘﻭﻡ‬Path‫ﺍﻝ‬ ‫ﺗﻬﻳﺋﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻘﻭﻡ‬ ‫ﻭﻫﻲ‬Path‫ﺍﻝ‬ ‫ﺗﻬﻳﺋﺔ‬ ‫ﺇﻋﺎﺩﺓ‬ ‫ﺃﻭ‬ path‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬Canvas)begins or resets the current path( moveTo():‫ﺍﻝ‬ ‫ﻣﻭﻗﻊ‬ ‫ﻟﻧﻘﻝ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﺳﺗﺧﺩﻡ‬Path‫ﻣﻌﻳﻧﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﺍﻟﻰ‬)x, y(‫ﺃﻗﻭﻡ‬ ‫ﺃﻭ‬ ‫ﺧﻁ‬ ‫ﺭﺳﻡ‬ ‫ﺩﻭﻥ‬ ‫ﺗﺗﻡ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻟﻧﻘﻝ‬ ‫ﻋﻣﻠﻳﺔ‬ ،‫ﻭﺍﻟﺻﺎﺩﻱ‬ ‫ﺍﻟﺳﻳﻧﻲ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺗﺣﺩﻳﺩﻫﺎ‬ path‫ﻟﻠﻣﺳﺗﺧﺩﻡ‬ ‫ﻅﺎﻫﺭ‬...‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻟﺩﻭﺍﻝ‬ ‫ﻣﻥ‬ ‫ﺑﺎﻷﺳﻔﻝ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﺩﻭﺍﻝ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬ ‫ﺗﻌﺩ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻭﻫﺫﻩ‬ ‫ﺍﻝ‬ ‫ﺑﺈﻧﺷﺎء‬Paths_^)..*‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻓﻲ‬10,30‫ﺍﺑﺗﻌﺩ‬ ‫ﺗﻌﻧﻲ‬10‫ﻭ‬ ‫ﺱ‬ ‫ﻋﻥ‬ ‫ﺑﻛﺳﻝ‬30‫ﺹ‬ ‫ﻋﻥ‬( (lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc())
  24. 24. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com bezierCurveTo():‫ﺑﻳﺯﻳﺭ‬ ‫ﻣﻧﺣﻧﻳﺎﺕ‬ ‫ﻟﺭﺳﻡ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﻣﻛﻌﺑﺔ‬)cubic Bézier curve(‫ﺍﻟﻣﻧﺣﻧﻳﺎﺕ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻧﻭﻉ‬ ‫ﻫﺫﺍ‬ ‫ﻭﻳﻌﺗﻣﺩ‬ ، ‫ﺑﻪ‬ ‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻟﻣﻌﺎﺩﻟﺔ‬ ‫ﺣﺳﺏ‬ ‫ﻫﻲ‬ ‫ﻧﻘﺎﻁ‬ ‫ﺃﺭﺑﻊ‬ ‫ﻭﺟﻭﺩ‬ ‫ﻋﻠﻰ‬: P0, P1, P2, P3‫ﻭﻳﺳﻣﻰ‬ ،‫ﺑﻳﺯﻳﺭ‬ ‫ﻣﻧﺣﻧﻰ‬ ‫ﺗﺷﻛﻝ‬ ‫ﻣﻥ‬ ‫ﻫﻲ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﻫﺫﻩ‬ ،‫ﺍﻟﻣﻛﻌﺏ‬ ‫ﺍﻟﻣﻧﺣﻧﻰ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﻫﺫﻩ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﺟﺭﺍء‬ ‫ﻣﻥ‬ ‫ﺍﻟﻧﺎﺗﺞ‬ ‫ﺍﻟﻣﻧﺣﻧﻰ‬ ‫ﻫﺫﺍ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻌﺎﻟﻲ‬ ‫ﺍﻟﺑﻌﺩ‬ ‫ﺃﻭ‬ ‫ﺍﻟﻔﺿﺎء‬ ‫ﻓﻲ‬ ‫ﻳﺷﻛﻝ‬ ‫ﻷﻧﻪ‬_^.. * ‫ﺗﺣﺩﻳﺩ‬ ‫ﻳﻠﺯﻣﻧﺎ‬ ‫ﺍﻟﻣﻧﺣﻧﻰ‬ ‫ﻫﺫﺍ‬ ‫ﻣﻊ‬ ‫ﺑﺭﻣﺟﻳﺎ‬ ‫ﺗﻌﺎﻣﻠﻧﺎ‬ ‫ﺃﺛﻧﺎء‬ ‫ﺍﻵﻥ‬3‫ﺍﻟﺯﺍﻣﻳﺔ‬ ‫ﻧﻘﺎﻁ‬ ‫ﻛﺎﻟﺗﺎﻟﻲ‬ ‫ﻭﻫﻲ‬ ‫ﻭﻣﻁﻠﻭﺑﺔ‬: context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
  25. 25. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com cp1x, cp1y:‫ﺗﺳﺗﺧﺩﻡ‬ ‫ﻭﺍﻟﺗﻲ‬ ،‫ﺍﻟﻣﻧﺣﻧﻰ‬ ‫ﻓﻲ‬ ‫ﺍﻷﻭﻟﻰ‬ ‫ﺍﻟﺗﺣﻛﻡ‬ ‫ﻧﻘﺎﻁ‬ ‫ﻫﻲ‬ ‫ﺑﻳﺭﻳﺯ‬ ‫ﻣﻛﻌﺏ‬ ‫ﻣﻧﺣﻧﻰ‬ ‫ﺣﺳﺎﺏ‬ ‫ﻓﻲ‬ cp2x, cp2y:‫ﺗﺳﺗﺧﺩﻡ‬ ‫ﻭﺍﻟﺗﻲ‬ ،‫ﺍﻟﻣﻧﺣﻧﻰ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺛﺎﻧﻳﺔ‬ ‫ﺍﻟﺗﺣﻛﻡ‬ ‫ﻧﻘﺎﻁ‬ ‫ﻫﻲ‬ ‫ﺑﻳﺭﻳﺯ‬ ‫ﻣﻛﻌﺏ‬ ‫ﻣﻧﺣﻧﻰ‬ ‫ﺣﺳﺎﺏ‬ ‫ﻓﻲ‬ ‫ﺃﻳﺿﺎ‬. x,y:‫ﺑﻳﺭﻳﺯ‬ ‫ﻟﻣﻧﺣﻧﻰ‬ ‫ﺍﻟﻧﻬﺎﻳﺔ‬ ‫ﺑﻧﻘﻁﺔ‬ ‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻹﺣﺩﺍﺛﻳﺎﺕ‬ ‫ﻫﻧﺎ‬. ‫ﻣﻼﺣﻅﺔ‬:‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺗﺣﺩﻳﺩﻫﺎ‬ ‫ﻓﻳﺗﻡ‬ ‫ﺍﻟﺑﺩﺍﻳﺔ‬ ‫ﺇﺣﺩﺍﺛﻳﺎﺕ‬ ‫ﺃﻣﺎ‬moveTo، ‫ﺍﻝ‬ ‫ﻧﻘﻝ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﻥ‬ ‫ﺍﻟﻣﺳﺅﻭﻟﺔ‬ ‫ﻫﻲ‬ ‫ﺫﻛﺭﻧﺎ‬ ‫ﻓﻛﻣﺎ‬Path‫ﻣﻌﻳﻧﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻫﻧﺎﻙ‬ ‫ﻣﻥ‬ ‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﺑﺩء‬ ‫ﻧﺳﺗﻁﻳﻊ‬ ‫ﺣﺗﻰ‬^_^
  26. 26. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com lineTo:‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺧﻁ‬ ‫ﻟﺭﺳﻡ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﺳﺗﺧﺩﻡ‬Canvas‫ﻫﺫﺍ‬ ، ‫ﻟﻪ‬ ‫ﺍﻟﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﺗﻛﻭﻥ‬ ‫ﺍﻟﺧﻁ‬،‫ﺍﻟﺭﺳﻡ‬ ‫ﺃﺛﻧﺎء‬ ‫ﺍﻟﻳﻬﺎ‬ ‫ﻭﺻﻠﻧﺎ‬ ‫ﻧﻘﻁﺔ‬ ‫ﺁﺧﺭ‬ ‫ﻫﻲ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﺑﺩء‬ ‫ﻗﺑﻝ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬ ‫ﻭﺍﻟﺣﺎﻟﺔ‬moveTo ‫ﻫﻲ‬)0,0(‫ﺍﻝ‬ ‫ﻳﺳﺎﺭ‬ ‫ﺃﻋﻠﻰ‬Canvas..‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺃﻣﺎ‬)‫ﺍﻟﻘﻳﻡ‬( ‫ﻓﻬﻲ‬ ‫ﻣﻧﺎ‬ ‫ﺍﻟﻣﻁﻠﻭﺑﺔ‬)x, y(‫ﺍﻟﺧﻁ‬ ‫ﻫﺫﺍ‬ ‫ﺳﻳﻧﺗﻬﻲ‬ ‫ﺃﻭ‬ ‫ﺳﻳﻘﻑ‬ ‫ﺃﻳﻥ‬ ‫ﺗﺣﺩﺩ‬ ‫ﻭﻫﻲ‬ ‫ﻣﻥ‬ ‫ﺑﺩﺃﺕ‬ ‫ﺃﻧﻧﻲ‬ ‫ﺇﻓﺗﺭﺿﻧﺎ‬ ‫ﻟﻭ‬ ‫ﻓﻣﺛﻼ‬)0,0(‫ﺍﻟﻘﻳﻡ‬ ‫ﺑﺈﺩﺧﺎﻝ‬ ‫ﻭﻗﻣﺕ‬ )100,200(‫ﻣﻥ‬ ‫ﺍﻋﺗﺑﺎﺭ‬ ‫ﺭﺳﻣﻪ‬ ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺧﻁ‬ ‫ﻓﺈﻥ‬0‫ﺳﻳﻧﻲ‬0،‫ﺻﺎﺩﻱ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﺍﻟﻰ‬100،‫ﺳﻳﻧﻲ‬200‫ﺻﺎﺩﻱ‬..^_^
  27. 27. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com closePath():‫ﺭﺳﻡ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻘﻭﻡ‬path‫ﻗﻣﺕ‬ ‫ﻧﻘﻁﺔ‬ ‫ﺁﺧﺭ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﺑﺈﻏﻼﻕ‬ ‫ﻧﻘﻭﻡ‬ ‫ﻓﻌﻠﻳﺎ‬ ‫ﺃﻧﻧﺎ‬ ‫ﺃﻱ‬ ،‫ﺍﻟﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺭﺟﻭﻋﺎ‬ ‫ﺑﺭﺳﻣﻬﺎ‬ ‫ﺑﺑﻌﺿﻬﺎ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺟﻣﻳﻊ‬ ‫ﺗﺗﺻﻝ‬ ‫ﺑﺣﻳﺙ‬ ‫ﺑﺭﺳﻣﻪ‬ ‫ﻧﻘﻭﻡ‬ ‫ﺍﻟﺫﻱ‬... Fill():‫ﺗﻌﺑﺋﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻘﻭﻡ‬ ‫ﺍﻟﻠﻭﻥ‬ ‫ﻭﻳﻛﻭﻥ‬ ،‫ﺭﺳﻣﻪ‬ ‫ﺍﻟﻣﺭﺍﺩ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﺍﻷﺳﻭﺩ‬ ‫ﺍﻟﻠﻭﻥ‬ ‫ﻫﻭ‬ ‫ﻟﻠﺗﻌﺑﺋﺔ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻲ‬ ‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻠﻭﻥ‬ ‫ﺗﻐﻳﻳﺭ‬ ‫ﻭﻳﻣﻛﻥ‬fillStyle‫ﻛﺎﻥ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻭﻓﻲ‬ ، ‫ﺍﻟﺗﻌﺑﺋﺔ‬ ‫ﻟﻭﻥ‬ ‫ﻫﻭ‬ ‫ﺃﺣﻣﺭ‬ ‫ﺍﻟﻠﻭﻥ‬_^*
  28. 28. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com lineWidth:‫ﻟﻠﺧﻁ‬ ‫ﺍﻟﺳﻣﻙ‬ ‫ﻣﻘﺩﺍﺭ‬ ‫ﻟﺗﺣﺩﻳﺩ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﺣﺎﻟﻳﺔ‬ ‫ﺍﻟﺳﻣﻙ‬ ‫ﻗﻳﻣﺔ‬ ‫ﻹﺭﺟﺎﻉ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺍﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻥ‬ ‫ﻛﻣﺎ‬ ،‫ﺍﻟﻣﺭﺳﻭﻡ‬ ‫ﺍﻟﻣﺭﺳﻭﻡ‬ ‫ﻟﻠﺧﻁ‬:P‫ﺑﺎﻟﺑﻛﺳﻝ‬ ‫ﻗﻳﻣﺗﻪ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻳﺗﻡ‬ ‫ﺍﻟﺧﻁ‬ ‫ﺳﻣﻙ‬ ‫ﻁﺑﻌﺎ‬ ،^^ ‫ﺑﺳﻣﻙ‬ ‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻧﻔﺱ‬ ‫ﺷﺎﻫﺩ‬15‫ﺑﻛﺳﻝ‬:
  29. 29. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com strokeStyle:‫ﻭﻣﻥ‬ ،‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﻣﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﺧﻁ‬ ‫ﻟﻭﻥ‬ ‫ﺗﻐﻳﻳﺭ‬ ‫ﻟﻧﺎ‬ ‫ﺗﺗﻳﺢ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻷﺣﻣﺭ‬ ‫ﻣﺛﻝ‬ ‫ﻋﺎﺩﻱ‬ ‫ﻟﻭﻥ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﺇﻣﻛﺎﻧﻳﺔ‬ ‫ﻫﻲ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻟﻬﺫﻩ‬ ‫ﺍﻟﻣﺗﺎﺣﺔ‬ ‫ﺍﻟﺟﻣﻳﻠﺔ‬ ‫ﺍﻟﺧﻳﺎﺭﺍﺕ‬ ‫ﻭﺍﻷﺻﻔﺭ‬..‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺃﻭ‬ ،‫ﺍﻟﺦ‬Gradient‫ﺃﻭ‬pattern‫ﺍﻟﺻﻳﻐﺔ‬ ‫ﺗﻛﻭﻥ‬ ‫ﻭﺑﻬﺫﺍ‬ ‫ﻫﻲ‬ ‫ﺍﻟﻌﺎﻣﺔ‬: context.strokeStyle=color|gradient|pattern; ‫ﺍﻝ‬ ‫ﻹﺳﺗﺧﺩﺍﻡ‬gradient‫ﻫﻲ‬ ‫ﺃﺧﺭﻯ‬ ‫ﺩﺍﻟﺔ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻋﻠﻳﻙ‬ ‫ﻳﺟﺏ‬ createLinearGradient‫ﺍﻝ‬ ‫ﻭﻹﺳﺗﺧﺩﺍﻡ‬pattern‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻋﻠﻳﻙ‬ ‫ﻳﺟﺏ‬ createPattern‫ﺍﻝ‬ ‫ﺗﺄﺧﺫ‬ ‫ﺑﺣﻳﺙ‬ ،obj‫ﺍﻟﻧﺎﺗﺞ‬ ‫ﺑﺎﻝ‬ ‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺗﺟﻌﻠﻪ‬ ‫ﻣﻧﻬﻡ‬ strokeStyle‫ﺍﻟﺗﻌﺩﻳﻼﺕ‬ ‫ﺑﻌﺽ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬ ،‫ﺍﻟﻁﻔﻳﻔﺔ‬:
  30. 30. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻝ‬ ‫ﻭﺃﺧﻳﺭﺍ‬stroke():‫ﺗﻁﺑﻳﻖ‬ ‫ﺃﻭ‬ ‫ﺑﺗﻧﻔﻳﺫ‬ ‫ﺗﻘﻭﻡ‬ ‫ﻣﻥ‬ ‫ﻓﻌﻠﻳﺎ‬ ‫ﻫﻲ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻟﺧﺻﺎﺋﺹ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺑﺑﻧﺎﺋﻪ‬ ‫ﻗﻣﻧﺎ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﺭﺳﻡ‬moveTo‫ﻭ‬ lineTo‫ﺍﻷﺳﻭﺩ‬ ‫ﺍﻟﻠﻭﻥ‬ ‫ﻫﻭ‬ ‫ﻟﻪ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻲ‬ ‫ﻭﺍﻟﻠﻭﻥ‬ ،... ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺑﻌﺽ‬ ‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬^_^
  31. 31. ‫ﺩﻋﺎء‬
  32. 32. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻟﻬﺫﺍ‬ ‫ﺗﻧﺗﺑﻪ‬ ‫ﺃﻥ‬ ‫ﺃﺭﻳﺩﻙ‬ ،‫ﺍﻵﻥ‬‫ﻋﺩﺓ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺗﻘﺳﻳﻣﺔ‬ ‫ﺳﺄﻗﻭﻡ‬ ‫ﻭﺍﻟﺫﻱ‬ ‫ﺃﺟﺯﺍء‬: ‫ﻣﺛﺎﻝ‬4-‫ﺃ‬:‫ﺍﻟﺷﻛﻝ‬ ‫ﻟﻁﺑﺎﻋﺔ‬ ‫ﺑﺭﻣﺟﻳﺔ‬ ‫ﺷﻳﻔﺭﺓ‬ ‫ﺑﻛﺗﺎﺑﺔ‬ ‫ﺍﻟﻘﻳﺎﻡ‬ ‫ﻣﻧﻙ‬ ‫ﻁﻠﺑﺕ‬ ‫ﻟﻭ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﻛﺗﺎﺑﺔ‬ ‫ﺣﺎﻭﻝ‬ ‫ﺫﻟﻙ؟‬ ‫ﺗﺳﺗﻁﻳﻊ‬ ‫ﻫﻝ‬ ،‫ﺍﻷﺳﻔﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻣﻭﺟﻭﺩ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﻟﺗﺭﻯ‬ ‫ﺇﻧﺗﻘﻝ‬ ‫ﺫﻟﻙ‬ ‫ﺑﻌﺩ‬ ،‫ﺗﻌﻠﻣﻧﺎﻩ‬ ‫ﻭﻣﻣﺎ‬ ‫ﺳﻬﻠﺔ‬ ‫ﺷﻳﻔﺭﺓ‬ ‫ﻓﻬﻲ‬ ،‫ﻟﻪ‬ ‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﺍﻟﺷﺭﻳﺣﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬:
  33. 33. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﻟﻠﺷﻛﻝ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬: ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﺇﻥ‬ ،‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﺳﺗﺭﺳﻡ‬ ‫ﺃﻥ‬ ‫ﺃﻋﺗﻘﺩ‬ ‫ﻛﻣﺎ‬ ‫ﻟﻛﻥ‬ ‫ﺍﻟﻣﺭﺑﻊ‬ ‫ﺗﻌﺑﺋﺔ‬ ‫ﺣﺎﻭﻟﺕ‬ ،‫ﺁﺧﺭ‬ ‫ﺑﻠﻭﻥ‬ ‫ﺍﻷﺑﻳﺽ‬ ‫ﺑﺎﺋﺕ‬ ‫ﺍﻟﻣﺣﺎﻭﻟﺔ‬ ‫ﻟﻛﻥ‬ ‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺑﺎﻟﻔﺷﻝ‬ Fill..‫ﻟﻣﺎﺫﺍ؟‬
  34. 34. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﺑﺭﺳﻡ‬ ‫ﻗﻣﺕ‬ ‫ﻟﻘﺩ‬lineTo‫ﻭﺍﻝ‬moveTo ‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻋﻣﻠﻳﺔ‬ ‫ﻟﻛﻥ‬ ،‫ﺗﻌﻠﻣﻧﺎﻩ‬ ‫ﻣﺎ‬ ‫ﻭﻫﻭ‬moveTo‫ﺍﻟﻣﻭﻗﻊ‬ ‫ﻧﻘﻝ‬ ‫ﺗﻌﻧﻲ‬ ‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻳﻌﻧﻲ‬ ‫ﻭﻫﺫﺍ‬ ،‫ﺧﻁ‬ ‫ﺭﺳﻡ‬ ‫ﺩﻭﻥ‬ ‫ﺃﺧﺭﻯ‬ ‫ﺍﻟﻰ‬ ‫ﻧﻘﻁﺔ‬ ‫ﻣﻥ‬path‫ﻳﺩﻭﺭ‬ ‫ﻟﻥ‬ ‫ﺍﻝ‬ ‫ﻓﺈﻥ‬ ‫ﻟﻬﺫﺍ‬ ،‫ﻣﺗﺻﻠﺔ‬ ‫ﺣﻠﻘﺔ‬ ‫ﺿﻣﻥ‬Fill‫ﺗﻅﻬﺭ‬ ‫ﻓﻠﻥ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻣﻬﺎ‬ ‫ﻗﻣﺕ‬ ‫ﻟﻭ‬ ‫ﺍﻝ‬ ‫ﻷﻥ‬ ،‫ﺍﻟﺷﻛﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺗﻌﺑﺋﺔ‬ ‫ﺃﻱ‬Fill‫ﺍﻟﻰ‬ ‫ﺗﺣﺗﺎﺝ‬path‫ﻭﻻ‬ ،‫ﻣﺗﺻﻝ‬ ‫ﻣﻐﻠﻘﺎ‬ ‫ﻳﻛﻭﻥ‬ ‫ﺃﻥ‬ ‫ﺑﻣﺗﺻﻝ‬ ‫ﺃﻗﺻﺩ‬... ‫ﺍﻟﺷﻛﻝ‬ ‫ﻫﺫﺍ‬ ‫ﺭﺳﻡ‬ ‫ﻣﻧﻙ‬ ‫ﻁﻠﺑﺕ‬ ‫ﻟﻭ‬ ‫ﻣﺎﺫﺍ‬ ‫ﻭﺍﻵﻥ‬: ‫ﺍﻟﻣﺛﺎﻝ‬4-‫ﺏ‬) :‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﺑﻛﺗﺎﺑﺔ‬ ‫ﻗﻡ‬( ‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﻟﻠﺷﺭﻳﺣﺔ‬ ‫ﺇﻧﺗﻘﻝ‬ ‫ﺫﻟﻙ‬ ‫ﺑﻌﺩ‬^_^
  35. 35. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻟﻠﻣﺛﺎﻝ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬4-‫ﺏ‬: ‫ﺑﺭﺳﻡ‬ ‫ﻗﻳﺎﻣﻙ‬ ‫ﻋﻧﺩ‬ ‫ﺍﻵﻥ‬Custom Shape ‫ﻟﺗﻌﺑﺋﺔ‬ ‫ﻁﺭﻳﻘﺔ‬ ‫ﻋﻥ‬ ‫ﺍﻟﺑﺣﺙ‬ ‫ﻋﻠﻳﻙ‬ ‫ﻳﺟﺏ‬ ‫ﺑﺄﻛﺛﺭ‬ ‫ﻫﺫﺍ‬ ‫ﻳﺗﻡ‬ ‫ﺃﻥ‬ ‫ﻭﻳﻣﻛﻥ‬ ،‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺗﻠﻭﻳﻥ‬ ‫ﺃﻭ‬ ‫ﻫﻲ‬ ‫ﺍﻟﻁﺭﻕ‬ ‫ﺃﻫﻡ‬ ‫ﻭﻣﻥ‬ ،‫ﻁﺭﻳﻘﺔ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻁﺑﻘﺎﺕ‬ ‫ﻓﻛﺭﺓ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬)Layers( ‫ﻓﻭﻕ‬ ‫ﺷﻛﻝ‬ ‫ﺭﺳﻡ‬ ‫ﺃﻭ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﻳﺗﻡ‬ ‫ﺑﺣﻳﺙ‬ ‫ﻳﻅﻬﺭ‬ ‫ﻭﺑﻬﺫﺍ‬ ،‫ﺗﻌﺑﺋﺗﻪ‬ ‫ﺍﻟﻣﻁﻠﻭﺏ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻫﻧﺎ‬ ‫ﻻﺣﻅ‬ ،‫ﺑﻪ‬ ‫ﻧﺭﻏﺏ‬ ‫ﻛﺎ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻧﻔﺱ‬ ‫ﻓﻲ‬ ‫ﻣﺳﺗﻁﻳﻝ‬ ‫ﺑﺭﺳﻡ‬ ‫ﻗﻣﻧﺎ‬ ‫ﻟﻘﺩ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫ‬ ‫ﺍﻷﺯﺭﻕ‬ ‫ﺑﺎﻟﻠﻭﻥ‬ ‫ﺑﺗﻌﺑﺋﺗﻬﺎ‬ ‫ﻧﺭﻏﺏ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﻣﺳﺎﺣﺔ‬ ^_^..
  36. 36. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﻭﺍﻵﻥ‬.. ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﻫﻝ‬ ‫ﺍﻟﻣﺛﺎﻟﻳﻥ‬ ‫ﺭﺳﻡ‬ ‫ﺍﻟﺳﺎﺑﻘﻳﻥ‬ ‫ﺑﺷﻳﻔﺭﺓ‬ ‫ﺃﻛﺛﺭ‬ ‫ﺑﺭﻣﺟﺔ‬ ‫ﻭﺃﻗﻝ‬ ‫ﺇﺣﺗﺭﺍﻓﻳﺔ‬ ‫ﺍﻷﺳﻁﺭ؟‬ ‫ﺑﻌﺩﺩ‬ ،‫ﻧﻌﻡ‬ ‫ﺍﻟﺟﻭﺍﺏ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﺷﺎﻫﺩ‬: ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  37. 37. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬ ‫ﻗﻣﺕ‬ ‫ﻟﻘﺩ‬lineCap‫ﻭ‬lineJoin‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻓﻲ‬ ‫؟‬ ‫ﺍﻟﺧﺎﺻﻳﺗﻳﻥ‬ ‫ﻫﺎﺗﻳﻥ‬ ‫ﻣﻥ‬ ‫ﻛﻝ‬ ‫ﻭﻅﻳﻔﺔ‬ ‫ﻫﻲ‬ ‫ﻣﺎ‬ ‫ﺗﻌﻠﻡ‬ ‫ﻫﻝ‬ ‫ﻟﻛﻥ‬ ،‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﺧﺎﺻﻳﺗﻳﻥ‬ ‫ﻫﺎﺗﻳﻥ‬ ‫ﻭﻓﺎﺋﺩﺓ‬ ‫ﺍﻟﻔﺭﻕ‬ ‫ﻟﻣﻌﺭﻓﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﺃﻭﻻ‬ ‫ﺷﺎﻫﺩ‬: ‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﻟﻠﺷﺭﻳﺣﺔ‬ ‫ﺇﻧﺗﻘﻝ‬ ،‫ﻟﻠﺻﻭﺭﺓ‬ ‫ﻣﺷﺎﻫﺩﺗﻙ‬ ‫ﺑﻌﺩ‬:
  38. 38. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com lineCap:‫ﺍﻟﺷﻛﻝ‬ ‫ﺇﺭﺟﺎﻉ‬ ‫ﺃﻭ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﻥ‬ ‫ﻣﺳﺅﻭﻟﺔ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻣﺛﻝ‬ ،‫ﻟﻠﺧﻁ‬ ‫ﺍﻟﻧﻬﺎﻳﺔ‬ ‫ﺑﻧﻘﻁﺔ‬ ‫ﺍﻟﺧﺎﺹ‬round‫ﺑﺣﻳﺙ‬ ‫ﻓﻲ‬ ‫ﺃﻧﻪ‬ ‫ﺣﻳﻥ‬ ‫ﻓﻲ‬ ‫ﻣﺳﺗﺩﻳﺭ‬ ‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺧﻁ‬ ‫ﻧﻬﺎﻳﺔ‬ ‫ﺷﻛﻝ‬ ‫ﻛﺎﻥ‬ ‫ﻛﺫﻟﻙ‬ ‫ﻳﻛﻥ‬ ‫ﻟﻡ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬ ‫ﺍﻟﺣﺎﻟﺔ‬... ‫ﻣﻼﺣﻅﺔ‬:‫ﺍﻟﻘﻳﻣﺔ‬round‫ﻭ‬square‫ﻣﺎ‬ ‫ﻧﻭﻋﺎ‬ ‫ﺃﻁﻭﻝ‬ ‫ﺍﻟﺧﻁ‬ ‫ﺗﺟﻌﻝ‬... lineJoin:‫ﺍﻟﺷﻛﻝ‬ ‫ﺇﺭﺟﺎﻉ‬ ‫ﺃﻭ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﻥ‬ ‫ﻣﺳﺅﻭﻟﺔ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻣﺛﻝ‬ ،‫ﻣﻌﺎ‬ ‫ﺧﻁﻳﻥ‬ ‫ﺍﻟﺗﻘﺎء‬ ‫ﺑﻧﻘﻁﺔ‬ ‫ﺍﻟﺧﺎﺹ‬round‫ﺑﺣﻳﺙ‬ ‫ﻣﻧﺣﻰ‬ ‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻹﻟﺗﻘﺎء‬ ‫ﻧﻘﻁﺔ‬ ‫ﺷﻛﻝ‬ ‫ﻛﺎﻥ‬)‫ﻣﺳﺗﺩﻳﺭ‬(
  39. 39. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻵﻥ‬ ‫ﺗﻛﻭﻥ‬ ‫ﺃﻥ‬ ‫ﺃﺭﺟﻭﺍ‬ ‫ﻟﻛﻥ‬ ،‫ﻣﻌﺎ‬ ‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺟﻣﻳﻊ‬ ‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬ ‫ﺃﺛﻧﺎء‬ ‫ﺗﻔﻛﺭ‬ ‫ﺗﻛﻭﻥ‬ ‫ﺃﻥ‬ ‫ﻭﺣﺎﻭﻝ‬ ،‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺟﻣﻳﻊ‬ ‫ﺑﺗﻁﺑﻳﻖ‬ ‫ﻗﻣﺕ‬ ‫ﻗﺩ‬ ‫ﻭﻓﻬﻡ‬ ‫ﻟﻣﺷﺎﻫﺩﺓ‬ ‫ﺧﺻﺎﺋﺹ‬ ‫ﻭﺇﺿﺎﻓﺔ‬ ‫ﻭﺣﺫﻑ‬ ‫ﺍﻟﻘﻳﻡ‬ ‫ﺗﻐﻳﻳﺭ‬ ‫ﻭﺣﺎﻭﻝ‬ ،‫ﺍﻟﺗﻁﺑﻳﻖ‬ ‫ﺍﻟﺻﺣﻳﺣﺔ‬ ‫ﺑﺎﻟﻁﺭﻳﻘﺔ‬ ‫ﺍﻟﻧﺗﺎﺋﺞ‬^_^ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬
  40. 40. ‫ﺍﻷﻳﻭﺑﻲ‬ ‫ﺍﻟﺩﻳﻥ‬ ‫ﺻﻼﺡ‬–‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺭﺣﻣﻪ‬--
  41. 41. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬5:‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬Canvas‫ﺍﻟﺻﻭﺭ‬ ‫ﺭﺳﻡ‬ ‫ﻳﻣﻛﻧﻧﺎ‬^_^،‫ﻧﻌﻡ‬ ، ‫ﻭﻣﻥ‬ ،‫ﺭﺳﻣﻬﺎ‬ ‫ﺍﻟﻣﺭﺍﺩ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺃﺧﺫ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻘﻭﻡ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻋﻣﻠﻳﺔ‬ ،‫ﺗﺗﻌﺟﺏ‬ ‫ﻻ‬ ‫ﻟﻧﺎ‬ ‫ﻳﺗﻳﺢ‬ ‫ﻛﻣﺎ‬ ،‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻫﻲ‬ ‫ﻛﻣﺎ‬ ‫ﺑﺎﻟﺑﻛﺳﻝ‬ ‫ﺍﻟﺷﺎﺷﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺗﻧﻔﻳﺫ‬ ‫ﺛﻡ‬ ‫ﺍﻝ‬Canvas‫ﻫﻝ‬ ،‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺑﻁﺑﻳﻌﺔ‬ ‫ﺍﻟﺗﺣﻛﻡ‬ ‫ﺍﻟﺻﻭﺭ‬ ‫ﺭﺳﻡ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻲ‬ ‫ﺑﺷﻛﻠﻬﺎ‬ ‫ﻧﺭﺳﻣﻬﺎ‬)Normal Scale(‫ﻣﻣﺗﺩ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺃﻡ‬ /‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻣﻥ‬ ‫ﺃﻁﻭﻝ‬)stretched(‫ﻣﻥ‬ ‫ﺟﺯء‬ ‫ﺍﻗﺗﺑﺳﻧﺎ‬ ‫ﺃﻧﻧﺎ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺻﻭﺭﺓ‬)Slicing... (‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺗﻧﻔﻳﺫﻫﺎ‬ ‫ﻳﻣﻛﻥ‬ ‫ﺍﻷﻣﻭﺭ‬ ‫ﻫﺫﻩ‬ ،‫ﺍﻟﺦ‬ ‫ﺍﻟﺩﺍﻟﺔ‬drawImage()‫ﻣﻥ‬ ‫ﻧﻭﻉ‬ ‫ﻹﻋﻁﺎء‬ ‫ﺟﺩﺍ‬ ‫ﻣﻔﻳﺩﺓ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻭﻫﺫﻩ‬ ، ‫ﻓﻲ‬ ‫ﺃﺳﺭﻉ‬ ‫ﺃﻧﻬﺎ‬ ‫ﻛﻣﺎ‬ ،‫ﺍﻟﻣﺧﺗﻠﻔﺔ‬ ‫ﺍﻟﺣﺭﻛﺎﺕ‬ ‫ﺃﻭ‬ ‫ﺍﻷﻟﻌﺎﺏ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺟﻣﺎﻟﻳﺔ‬ ‫ﺍﻟﺗﺄﺛﻳﺭﺍﺕ‬ ‫ﺍﻷﺧﺭﻯ‬ ‫ﺍﻷﻧﻣﺎﻁ‬ ‫ﺑﻌﺽ‬ ‫ﻣﻥ‬ ‫ﺍﻷﺣﻳﺎﻥ‬ ‫ﺑﻌﺽ‬..._^*
  42. 42. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻟﺩﺍﻟﺔ؟‬ ‫ﻫﺫﻩ‬ ‫ﺑﻪ‬ ‫ﺗﻘﻭﻡ‬ ‫ﻣﺎ‬ ‫ﻭﺣﺩﻩ‬ ‫ﻫﺫﺍ‬ ‫ﻫﻝ‬ ‫ﻭﺍﻵﻥ‬ ‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﻓﻳﺩﻳﻭ‬ ‫ﺭﺳﻡ‬ ‫ﺗﺳﺗﻁﻳﻊ‬ ‫ﺃﻳﺿﺎ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻓﻬﺫﻩ‬ ،‫ﻻ‬ ‫ﻁﺑﻌﺎ‬Canvas ^_^‫ﺍﻟﺑﺩء‬ ‫ﻳﻣﻛﻧﻬﺎ‬ ‫ﻻ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺃﻥ‬ ‫ﻭﻫﻲ‬ ،‫ﻣﻬﻣﺔ‬ ‫ﻣﻼﺣﻅﺔ‬ ‫ﻫﻧﺎﻙ‬ ‫ﻟﻛﻥ‬ ، ‫ﻧﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﻋﻣﻝ‬ ‫ﻭﻟﻧﺿﻣﻥ‬ ،‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺗﺣﻣﻳﻝ‬ ‫ﻗﺑﻝ‬ ‫ﺑﺎﻟﺭﺳﻡ‬ onload‫ﺍﻟﺟﻣﻳﻝ‬ ‫ﺑﺷﻛﻠﻬﺎ‬ ‫ﺍﻷﻣﻭﺭ‬ ‫ﺗﺳﻳﺭ‬ ‫ﻭﺑﻬﺫﺍ‬ ،^^‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬ ، ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﻋﻠﻰ‬ ‫ﻋﻣﻠﻳﺎ‬ ‫ﻣﺛﺎﻻ‬^_^ ‫ﻣﻼﺣﻅﺔ‬:window.onload()‫ﺃﻭ‬ document.getElementById("imageID").onload ‫ﻻ‬ ‫ﺃﻡ‬ ‫ﺗﺣﻣﻳﻠﻬﺎ‬ ‫ﺗﻡ‬ ‫ﺍﻟﻣﻁﻠﻭﺑﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺃﻥ‬ ‫ﻣﻥ‬ ‫ﻟﻠﺗﺣﻘﻖ‬ ‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬ ‫ﻳﻣﻛﻧﻧﺎ‬..
  43. 43. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺍﻟﻌﻧﻭﺍﻥ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺧﺎﻣﺱ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬: ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬ ‫ﺣﺟﻣﻬﺎ‬ ‫ﺍﻷﺻﻠﻳﺔ‬ 256*256‫ﻭﺍﻟﺻﻭﺭﺓ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻋﻣﻠﻳﺔ‬ ‫ﺑﻌﺩ‬ ‫ﺍﻟﻧﺎﺗﺟﺔ‬ ‫ﺑﺣﺟﻡ‬256*256 ‫ﻋﻠﻰ‬ ‫ﺑﺭﺳﻣﻬﺎ‬ ‫ﻗﻣﺕ‬ ‫ﻟﻛﻧﻧﻲ‬ ‫ﺑﻌﺩ‬100‫ﻣﻥ‬ ‫ﺑﻛﺳﻝ‬ ‫ﺍﻟﺧﺎﺹ‬ ‫ﺍﻟﺳﻳﻧﻲ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﺑﺎﻝ‬Canvas^_^.. ‫ﺍﻟﺷﺭﻳﺣﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻟﻧﺫﻫﺏ‬ ‫ﻭﺍﻵﻥ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﻘﻳﻡ‬ ‫ﻟﻧﺷﺭﺡ‬ ‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﻣﻊ‬ ‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺍﻝ‬drawImage^_^ ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  44. 44. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻟﻝ‬ ‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﺍﻟﺻﻳﻐﺔ‬drawImage‫ﻫﻲ‬: ‫ﺍﻟﺭﻣﺯ‬ ‫ﺗﺷﺎﻫﺩ‬ ‫ﻋﻧﺩﻣﺎ‬ ‫ﺃﻭﻻ‬s‫ﻓﻌﻠﻳﻙ‬ ‫ﺍﻟﺻﻳﻐﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻌﻭﺩ‬ ‫ﺍﻟﺭﻣﺯ‬ ‫ﻫﺫﺍ‬ ‫ﺃﻥ‬ ‫ﺗﻌﻠﻡ‬ ‫ﺃﻥ‬ ‫ﺍﻷﺻﻠﻳﺔ‬)source(‫ﺍﻟﺭﻣﺯ‬ ‫ﻭﺃﻥ‬d‫ﻳﻌﻭﺩ‬ ‫ﺭﺳﻣﻬﺎ‬ ‫ﺍﻟﻣﺭﺍﺩ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻋﻠﻰ‬)‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺷﺎﻫﺩ‬( )destination. (--<‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﺍﻟﺷﺭﻳﺣﺔ‬ ‫ﺟﺩﺍ‬ ‫ﻣﻬﻣﺔ‬ ‫ﺻﻭﺭﺓ‬ ‫ﺍﻟﺭﻣﻭﺯ‬ ‫ﺷﺭﺡ‬ ‫ﻭﺳﻳﺗﻡ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻣﺟﻭﺩﺓ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﺍﻟﺷﺭﺍﺋﺢ‬..
  45. 45. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻝ‬image:‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺭﺳﻣﻪ‬ ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﻌﻧﺻﺭ‬ ‫ﺍﻟﻣﺗﻐﻳﺭ‬ ‫ﻫﺫﺍ‬ ‫ﻳﻣﺛﻝ‬ Canvas‫ﺣﺗﻰ‬ ‫ﺃﻭ‬ ،‫ﻓﻳﺩﻳﻭ‬ ،‫ﺻﻭﺭﺓ‬ ‫ﻳﻛﻭﻥ‬ ‫ﺃﻥ‬ ‫ﻭﻳﻣﻛﻥ‬canvas‫ﺁﺧﺭ‬. ‫ﺍﻝ‬sx:‫ﻭﺍﻟﻧﻘﻁﺔ‬ ،‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﻟﻠﺻﻭﺭﺓ‬ ‫ﺍﻟﺳﻳﻧﻳﺔ‬ ‫ﺍﻟﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬ ‫ﻫﻲ‬ ‫ﻟﻬﺎ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬0‫ﺃﻧﻙ‬ ‫ﻳﻌﻧﻲ‬ ‫ﺑﻬﺎ‬ ‫ﺍﻟﺧﺎﺹ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺗﻐﻳﻳﺭ‬ ،‫ﺍﻟﻳﺳﺎﺭ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺗﺣﺩﺩﻳﻬﺎ‬ ‫ﻗﻣﺕ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺑﺭﺳﻡ‬ ‫ﺗﺭﻏﺏ‬ ‫ﺍﻟﺳﻳﻧﻲ‬. ‫ﺍﻝ‬sy:‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬ ‫ﻭﺍﻟﻘﻳﻣﺔ‬ ،‫ﺍﻟﺻﺎﺩﻱ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬ ‫ﻫﻲ‬ ‫ﻟﻬﺎ‬0‫ﻫﺫﻩ‬ ‫ﺭﺳﻡ‬ ‫ﺑﺑﺩء‬ ‫ﺗﺭﻏﺏ‬ ‫ﺃﻧﻙ‬ ‫ﻳﻌﻧﻲ‬ ‫ﻫﻧﺎ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺗﻐﻳﻳﺭ‬ ،‫ﺍﻷﻋﻠﻰ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺻﺎﺩﻱ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺗﺣﺩﻳﺩﻫﺎ‬ ‫ﻗﻣﺕ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺻﻭﺭﺓ‬...
  46. 46. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻝ‬swidth:،‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻣﻥ‬ ‫ﺇﻗﺗﻁﺎﻋﻪ‬ ‫ﺳﻳﺗﻡ‬ ‫ﻣﺎ‬ ‫ﻣﻘﺩﺍﺭ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬ ‫ﺍﻟﺳﻳﻧﻲ‬ ‫ﻟﻠﻣﺣﻭﺭ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻫﺫﻩ‬ ‫ﻭﺗﻛﻭﻥ‬)‫ﻟﻠﺻﻭﺭﺓ‬ ‫ﻋﺭﺿﻲ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺍﻹﻗﺗﻁﺎﻉ‬( ‫ﺍﻝ‬sheight:‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻣﻥ‬ ‫ﺇﻗﺗﻁﺎﻋﺔ‬ ‫ﺳﻳﺗﻡ‬ ‫ﻣﺎ‬ ‫ﻣﻘﺩﺍﺭ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬ ‫ﺍﻟﺻﺎﺩﻱ‬ ‫ﻟﻠﻣﺣﻭﺭ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻛﻭﻥ‬ ‫ﻭﺑﻬﺫﺍ‬ ،‫ﺭﺃﺳﻳﺎ‬)‫ﺑﺷﻛﻝ‬ ‫ﺍﻹﻧﻘﻁﺎﻉ‬ ‫ﺍﻹﺭﺗﻔﺎﻉ‬ ‫ﻳﻣﺛﻝ‬ ‫ﺭﺃﺳﻲ‬( ‫ﺍﻝ‬dx:‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺳﻳﻧﻲ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬Canvas‫ﻧﻘﻁﺔ‬ ‫ﻭﻫﻲ‬ ، ‫ﺍﻝ‬ ‫ﻳﺳﺎﺭ‬ ‫ﺃﻋﻠﻰ‬ ‫ﺗﻌﻧﻲ‬ ‫ﻫﻧﺎ‬ ‫ﺻﻔﺭ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺑﺩﺍﻳﺔ‬ ،‫ﺍﻟﺯﺍﻣﻳﺔ‬canvas.
  47. 47. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻝ‬dy:‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺻﺎﺩﻱ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬Canvas،‫ﺍﻟﺯﺍﻣﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﻭﻫﻲ‬ ، ‫ﺍﻝ‬ ‫ﻳﺳﺎﺭ‬ ‫ﺃﻋﻠﻰ‬ ‫ﺗﻌﻧﻲ‬ ‫ﻫﻧﺎ‬ ‫ﺻﻔﺭ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺑﺩﺍﻳﺔ‬canvas. ‫ﺍﻝ‬dWidth:‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺭﺳﻡ‬ ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺑﺎﻟﺣﻳﺯ‬ ‫ﺍﻟﺧﺎﺹ‬ ‫ﺍﻟﻌﺭﺽ‬ ‫ﻳﻣﺛﻝ‬ ‫ﺍﻟﻣﺗﻐﻳﺭ‬ ‫ﻫﺫﺍ‬ ‫ﺑﻌﻣﻝ‬ ‫ﺗﺳﻣﺢ‬ ‫ﻭﻫﻲ‬ ،‫ﺑﺩﺍﺧﻠﻪ‬scaling‫ﻟﻬﺎ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﺩﻡ‬ ‫ﺣﺎﻝ‬ ‫ﻭﻓﻲ‬ ،‫ﻟﻠﺻﻭﺭﺓ‬ ‫ﻋﻣﻝ‬ ‫ﻳﺗﻡ‬ ‫ﻟﻥ‬scale‫ﻟﻠﺻﻭﺭﺓ‬.. ‫ﺍﻝ‬dHeight:‫ﺭﺳﻡ‬ ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺑﺎﻟﺣﻳﺯ‬ ‫ﺍﻟﺧﺎﺹ‬ ‫ﺍﻹﺭﺗﻔﺎﻉ‬ ‫ﻳﻣﺛﻝ‬ ‫ﺍﻟﻣﺗﻐﻳﺭ‬ ‫ﻫﺫﺍ‬ ‫ﺑﻌﻣﻝ‬ ‫ﺗﺳﻣﺢ‬ ‫ﻭﻫﻲ‬ ،‫ﺑﺩﺍﺧﻠﻪ‬ ‫ﺍﻟﺻﻭﺭﺓ‬scaling‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﺩﻡ‬ ‫ﺣﺎﻝ‬ ‫ﻭﻓﻲ‬ ،‫ﻟﻠﺻﻭﺭﺓ‬ ‫ﻋﻣﻝ‬ ‫ﻳﺗﻡ‬ ‫ﻟﻥ‬ ‫ﻟﻬﺎ‬ ‫ﺍﻟﻘﻳﻣﺔ‬scale‫ﻟﻠﺻﻭﺭﺓ‬.. ‫ﺍﻟﻘﻳﻡ‬ ‫ﻟﻬﺫﻩ‬ ‫ﺫﻛﺭﻧﺎﻩ‬ ‫ﻣﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻣﺗﻧﻭﻋﺔ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻣﻥ‬ ‫ﻣﺟﻣﻭﻋﺔ‬ ‫ﻟﻧﺷﺎﻫﺩ‬ ،‫ﻭﺍﻵﻥ‬^_^
  48. 48. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬5-‫ﺏ‬: ‫ﻟﻘﺩ‬ ،‫ﻫﻧﺎ‬ ‫ﻻﺣﻅ‬ ‫ﺣﺟﻡ‬ ‫ﺑﺗﺣﺩﻳﺩ‬ ‫ﻗﻣﻧﺎ‬ ‫ﺍﻟﻣﺭﺍﺩ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺭﺳﻣﻬﺎ‬ Canvas‫ﺏ‬ 150*175‫ﻋﻠﻰ‬ ‫ﺑﻌﺩ‬50‫ﺳﻳﻧﻲ‬10 ‫ﺻﺎﺩﻱ‬_^*
  49. 49. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬5-‫ﺝ‬: ‫ﻗﻣﻧﺎ‬ ‫ﻟﻘﺩ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬ ‫ﻣﻥ‬ ‫ﺟﺯء‬ ‫ﺑﺎﻗﺗﻁﺎﻉ‬ ‫ﻭﻣﻥ‬ ‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺩﺍﺧﻝ‬ ‫ﻣﺟﺩﺩﺍ‬ ‫ﺭﺳﻣﻪ‬ ‫ﺛﻡ‬ ‫ﺍﻝ‬Canvas ‫ﻗﻣﺕ‬ ‫ﺃﻭﻻ‬ ‫ﺃﻧﻧﻲ‬ ‫ﻻﺣﻅ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﺑﺗﺣﺩﻳﺩ‬20‫ﻭ‬ 100‫ﻟﺗﺣﺩﻳﺩ‬ ‫ﻛﻧﻘﻁﺔ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻘﻁﻊ‬ ‫ﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ،‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻭﺍﻝ‬120‫ﻣﻘﺩﺍﺭ‬ ‫ﻓﻲ‬ ‫ﺑﻘﻁﻌﻪ‬ ‫ﺃﺭﻏﺏ‬ ‫ﻣﺎ‬ ‫ﻭﺭﺳﻣﻪ‬^^‫ﻭ‬ ،30 ‫ﻭﺍﻝ‬75‫ﺍﻟﺭﺳﻡ‬ ‫ﻣﻛﺎﻥ‬ ‫ﺍﻝ‬ ‫ﻓﻲ‬canvas
  50. 50. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬5-‫ﺩ‬) :‫ﺭﺳﻡ‬ ‫ﻁﺭﻳﻘﺔ‬ ‫ﻳﻭﺿﺢ‬ ‫ﻣﺛﺎﻝ‬canvas‫ﺩﺍﺧﻝ‬canvas( ‫ﻟﻘﺩ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬ ‫ﻻﺣﻅ‬ ‫ﺍﻝ‬ ‫ﺑﺭﺳﻡ‬ ‫ﻗﻣﻧﺎ‬Canvas ‫ﺍﻟﺳﺎﺑﻖ‬)‫ﻣﺛﺎﻝ‬5-‫ﺝ‬( ‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﻣﺟﺩﺩﺍ‬ Canvas5-‫ﺩ‬_^*
  51. 51. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬5-‫ﻫـ‬: ‫ﻣﺷﺎﻫﺩﺗﻪ‬ ‫ﻳﻣﻛﻧﻙ‬ ،‫ﺍﻟﻧﻘﺭ‬ ‫ﻋﻧﺩ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﻳﻌﻣﻝ‬ ‫ﻟﻡ‬ ‫ﺍﺫﺍ‬ ‫ﺏ‬ ‫ﺍﻟﻣﻌﻧﻭﻥ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ SampleExample‫ﺍﻟﺩﻭﺭﺓ‬ ‫ﻣﻠﻑ‬ ‫ﻓﻲ‬^_^ ‫ﻭﺍﻝ‬ ،‫ﻳﻌﻣﻝ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﺃﻥ‬ ،‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻻﺣﻅ‬ Canvas‫ﺑﺳﺎﻁﺔ‬ ‫ﺑﻛﻝ‬ ‫ﻫﻲ‬ ‫ﻭﺍﻟﻔﻛﺭﺓ‬ ،‫ﻣﻌﺎ‬ ‫ﻳﻌﻣﻝ‬ ‫ﺻﻭﺭﺓ‬ ‫ﻋﻥ‬ ‫ﻋﺑﺎﺭﺓ‬ ‫ﺃﺻﻼ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﺑﺄﻥ‬ ‫ﺗﻛﻣﻥ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﻭﺑﻬﺫﺍ‬ ،‫ﺍﻟﻭﺍﺣﺩﺓ‬ ‫ﺍﻟﺛﺎﻧﻳﺔ‬ ‫ﻓﻲ‬ ‫ﺑﺳﺭﻋﺔ‬ ‫ﺗﺗﺣﺭﻙ‬ ‫ﻭﺭﺳﻣﻬﺎ‬ ‫ﻫﻪ‬ ‫ﺍﻟﺻﻭﺭ‬ ‫ﻭﺃﺧﺫ‬ ‫ﺍﻟﻔﻛﺭﺓ‬ ‫ﺍﺳﺗﻐﻼﻝ‬ ‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬Canvas‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﻭﻫﻧﺎ‬ ، setInterval_^.. *‫ﺍﻟﺑﺭﻣﺟﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﺷﺎﻫﺩ‬:
  52. 52. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﻼﺣﻅﺔ‬:‫ﻁﺑﻌﺎ‬‫ﻟﻳﻛﻭﻥ‬‫ﺍﻟﻌﻣﻝ‬‫ﺿﻣﻥ‬‫ﺍﻟﻣﻌﺎﻳﻳﺭ‬‫ﺍﻹﺣﺗﺭﺍﻓﻳﺔ‬‫ﻓﻲ‬‫ﻛﺗﺎﺑﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬،‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬‫ﻻ‬‫ﺗﻧﺳﻰ‬‫ﺩﻭﻣﺎ‬‫ﺇﻳﻘﺎﻑ‬setInterval‫ﻋﻧﺩ‬‫ﺍﻹﻧﺗﻬﺎء‬ ‫ﻣﻥ‬‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬_^*،‫ﻭﻁﺑﻌﺎ‬‫ﻟﻥ‬‫ﺃﻧﻔﺫ‬‫ﻫﺫﻩ‬‫ﺍﻟﻔﻛﺭﺓ‬‫ﺑﺎﻷﻣﺛﻠﺔ‬_^*،‫ﺑﻝ‬ ‫ﺣﺎﻭﻝ‬‫ﺗﻧﻔﻳﺫﻫﺎ‬‫ﺃﻧﺕ‬:P)‫ﻭﺣﺎﻭﻝ‬‫ﺣﻝ‬‫ﺍﻟﻣﺷﻛﻠﺔ‬‫ﺍﻟﺗﻲ‬‫ﺳﺗﻅﻬﺭ‬‫ﺑﻌﺩ‬‫ﺫﻟﻙ‬‫ﻣﻊ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬:P( ‫ﻭﺑﻬﺫﺍ‬‫ﻧﻛﻭﻥ‬‫ﺇﻧﺗﻬﻳﻧﺎ‬‫ﺑﻔﺿﻝ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬‫ﻣﻥ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬^_^،‫ﻭﺍﻵﻥ‬‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﺟﻣﻳﻊ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺳﺎﺑﻘﺔ‬^_^،‫ﻭﻻ‬‫ﺗﻧﺳﻰ‬‫ﺗﻁﺑﻳﻖ‬‫ﻫﺫﻩ‬‫ﺍﻷﻣﺛﻠﺔ‬*_* ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬
  53. 53. ^_^‫ﻏﺎﻣﺭﺓ‬ ‫ﻭﻓﺭﺣﺔ‬ ‫ﻧﻔﺳﻳﺔ‬ ‫ﺭﺍﺣﺔ‬^_^
  54. 54. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬6:‫ﻣﻥ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﻋﻠﻰ‬‫ﺍﻟﺭﺳﻭﻣﺎﺕ‬‫ﺍﻟﺑﺳﻳﻁﺔ‬،‫ﺃﻳﺿﺎ‬‫ﻭﺍﻟﺗﻲ‬‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺗﻧﻔﻳﺫﻫﺎ‬‫ﻫﻲ‬‫ﺭﺳﻡ‬‫ﺍﻟﻧﺻﻭﺹ‬)draw text(^_^،‫ﻭﻳﻣﻛﻥ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻧﻔﺱ‬‫ﺍﻟﺧﺻﺎﺋﺹ‬‫ﻭﺍﻟﻣﺯﺍﻳﺎ‬‫ﺍﻟﺗﻲ‬‫ﻧﺳﺗﺧﺩﻣﻬﺎ‬‫ﻣﻊ‬‫ﺍﻝ‬CSS‫ﻣﺛﻝ‬‫ﺣﺟﻡ‬ ‫ﺍﻟﺧﻁ‬‫ﻭﻧﻭﻋﻪ‬..‫ﺍﻟﺦ‬ ‫ﻳﻣﻛﻧﻙ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬fillText()‫ﺃﻭ‬strokeText()‫ﻟﺭﺳﻡ‬‫ﺍﻟﺧﻁﻭﻁ‬‫ﺩﺍﺧﻝ‬ ‫ﺍﻝ‬Canvas_^*،‫ﻭﺍﻟﺻﻳﻐﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬‫ﻫﻲ‬: context.fillText(text,x,y,maxWidth); ‫ﺑﺣﻳﺙ‬‫ﻳﻛﻭﻥ‬‫ﺍﻟﻧﺹ‬‫ﻫﻭ‬text،‫ﻭﺍﻝ‬x‫ﻧﻘﻁﺔ‬‫ﺑﺩﺍﻳﺔ‬‫ﺍﻟﺭﺳﻡ‬‫ﻣﻥ‬‫ﺍﻟﻣﺣﻭﺭ‬،‫ﺍﻟﺳﻳﻧﻲ‬ ‫ﻭﺍﻝ‬y‫ﻟﻠﻣﺣﻭﺭ‬،‫ﺍﻟﺻﺎﺩﻱ‬‫ﻭﺍﻝ‬maxWidth‫ﺃﻛﺑﺭ‬‫ﻋﺭﺽ‬‫ﻳﻣﻛﻥ‬‫ﺃﻥ‬‫ﻳﺄﺧﺫﻩ‬ ‫ﺍﻟﻧﺹ‬.._^*
  55. 55. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﺛﻡ‬‫ﺇﻧﺗﻘﻝ‬ ‫ﻟﻠﺷﺭﻳﺣﺔ‬‫ﺍﻟﺗﺎﻟﻳﺔ‬..
  56. 56. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻓﻲ‬‫ﺍﻟﻣﺛﺎﻝ‬،‫ﺍﻟﺳﺎﺑﻖ‬‫ﺳﺄﺷﺭﺡ‬‫ﻧﻘﻁﺔ‬‫ﻭﺍﺣﺩﺓ‬‫ﻗﺩ‬‫ﺗﺛﻳﺭ‬‫ﺑﻌﺽ‬‫ﺍﻟﺭﻳﺑﺔ‬‫ﺃﺛﻧﺎء‬ ،‫ﺍﻟﻌﻣﻝ‬‫ﻭﻫﻲ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻝ‬textAlign،‫ﻓﻬﺫﻩ‬‫ﺍﻟﺧﺎﺻﻳﺔ‬‫ﻣﺳﺅﻭﻟﺔ‬‫ﻋﻥ‬ ‫ﺗﺣﺩﻳﺩ‬‫ﺃﻭ‬‫ﺇﺭﺟﺎﻉ‬‫ﻣﻘﺩﺍﺭ‬‫ﺍﻹﺯﺍﺣﺔ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﻬﺫﺍ‬،‫ﺍﻟﻧﺹ‬‫ﻫﻝ‬‫ﻫﻲ‬‫ﺑﺎﺗﺟﺎﻩ‬ ‫ﺍﻟﻳﻣﻳﻥ‬‫ﺃﻭ‬‫ﺍﻟﻳﺳﺎﺭ‬...،‫ﺍﻟﺦ‬‫ﻭﻫﻲ‬‫ﻛﺎﻟﺗﺎﻟﻲ‬: start:‫ﻭﻫﻲ‬‫ﺍﻟﺣﺎﻟﺔ‬،‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬‫ﻭﻳﺑﺩﺃ‬‫ﺭﺳﻡ‬‫ﺍﻟﻧﺹ‬‫ﻣﻥ‬‫ﺍﻟﻧﻘﻁﺔ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬ ‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﺑﻧﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﺍﻟﻣﺣﻭﺭ‬‫ﺍﻟﺳﻳﻧﻲ‬‫ﻭﺍﻟﺻﺎﺩﻱ‬.. end:‫ﻫﻧﺎ‬‫ﻳﺟﺏ‬‫ﺃﻥ‬‫ﻳﻧﺗﻬﻲ‬‫ﺍﻟﺭﺳﻡ‬‫ﻓﻲ‬‫ﺍﻟﻧﻘﺎﻁ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﻝ‬‫ﺱ‬‫ﻭﺹ‬ Center:‫ﻫﻧﺎ‬‫ﻳﺟﺏ‬‫ﺃﻥ‬‫ﻳﻛﻭﻥ‬‫ﻣﻧﺗﺻﻑ‬‫ﺍﻟﻧﺹ‬‫ﻓﻲ‬‫ﺍﻟﻧﻘﺎﻁ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬ ‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﻟﻛﻝ‬‫ﻣﻥ‬‫ﺱ‬‫ﻭ‬‫ﺹ‬. Left:‫ﻭﻫﻧﺎ‬‫ﻳﺗﻡ‬‫ﺍﻟﺑﺩء‬‫ﺑﺭﺳﻡ‬‫ﺍﻟﻧﻘﻁﺔ‬‫ﺃﻳﺿﺎ‬‫ﻣﻥ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﺑﻧﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﻛﻝ‬‫ﻣﻥ‬ ‫ﺱ‬‫ﻭ‬‫ﺹ‬. Right:‫ﻭﻫﻧﺎ‬‫ﻳﺟﺏ‬‫ﺃﻥ‬‫ﻳﻧﺗﻬﻲ‬‫ﺍﻟﺭﺳﻡ‬‫ﻓﻲ‬‫ﺍﻟﻧﻘﺎﻁ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﻝ‬‫ﺱ‬‫ﻭ‬‫ﺹ‬.
  57. 57. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻭﺍﻟﺳﺅﺍﻝ‬‫ﺍﻟﻘﻭﻱ‬_^*،‫ﻣﺎ‬‫ﺍﻟﻔﺭﻕ‬‫ﺑﻳﻥ‬‫ﺍﻝ‬start‫ﻭﺍﻝ‬left‫؟‬ ‫ﺃﻭ‬‫ﺍﻝ‬end‫ﻭﺍﻝ‬right‫؟‬ ‫ﺍﻟﺟﻭﺍﺏ‬:‫ﻫﻭ‬‫ﺃﻥ‬‫ﺍﻝ‬start‫ﻫﻲ‬align left‫ﻋﻧﺩﻣﺎ‬‫ﻳﻛﻭﻥ‬‫ﺍﻟﻣﺗﺻﻔﺢ‬ LTR،‫ﻟﻛﻥ‬‫ﺍﺫﺍ‬‫ﻛﺎﻥ‬‫ﺍﻟﻣﺗﺻﻔﺢ‬RTL‫ﻓﺳﻳﻛﻭﻥ‬‫ﺍﻝ‬start‫ﻫﻭ‬ align right،‫ﻟﺫﻟﻙ‬‫ﺇﺣﺭﺹ‬‫ﻋﻠﻰ‬‫ﺍﻟﺗﺄﻛﺩ‬‫ﻣﻥ‬‫ﻋﻣﻠﻙ‬‫ﺃﺛﻧﺎء‬‫ﺭﺳﻣﻙ‬‫ﻟﻝ‬ Canvas‫ﻟﻁﺭﻳﻘﺔ‬‫ﻗﺭﺍﺋﺔ‬‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬‫ﻟﻠﺭﺳﻡ‬‫ﺍﻟﺧﺎﺹ‬‫ﺑﻙ‬‫ﻋﻠﻰ‬‫ﺍﻝ‬ Canvas_^*..‫ﻁﺑﻌﺎ‬‫ﻫﻧﺎﻙ‬‫ﺍﻟﻌﺩﻳﺩ‬‫ﻣﻥ‬،‫ﺍﻟﺧﺻﺎﺋﺹ‬‫ﻳﻣﻛﻧﻙ‬‫ﺍﻟﺑﺣﺙ‬ ‫ﻋﻧﻬﺎ‬‫ﻭﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬‫ﻣﺛﻝ‬‫ﺍﻝ‬baseline :P‫ﻭﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬: ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬
  58. 58. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬7:‫ﻭﺁﺧﺭ‬‫ﺟﺯﺋﻳﺔ‬‫ﺗﻧﺩﺭﺝ‬‫ﺗﺣﺕ‬‫ﻫﺫﺍ‬،‫ﺍﻟﻣﻭﺿﻭﻉ‬‫ﻫﻭ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﻣﺗﺩﺭﺝ‬ ‫ﺍﻝ‬)Gradients(_^* ‫ﻟﺭﺳﻡ‬‫ﺃﻱ‬‫ﺗﺩﺭﻳﺞ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻟﺩﺍﻟﺔ‬createLinearGradient ‫ﻟﺭﺳﻡ‬‫ﺗﺩﺭﺝ‬‫ﺧﻁﻲ‬‫ﺃﻭ‬‫ﺍﻟﺩﺍﻟﺔ‬createRadialGradient‫ﻟﺭﺳﻡ‬ ‫ﺗﺩﺭﺝ‬‫ﺷﻌﺎﻋﻲ‬‫ﺃﻭ‬‫ﻧﺻﻑ‬‫ﻗﻁﺭﻱ‬..)radial/circular( ‫ﻭﺍﻟﺳﺅﺍﻝ‬‫ﺍﻵﻥ‬^^،‫ﺃﻳﻥ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﻫﺫﺍ‬‫ﺍﻟﺗﺩﺭﺝ؟‬ ‫ﺍﻟﺟﻭﺍﺏ‬:‫ﻓﻲ‬‫ﻛﻝ‬‫ﻣﻥ‬،‫ﺍﻟﻧﺻﻭﺹ‬‫ﻭﺍﻟﻣﺭﺑﻌﺎﺕ‬‫ﻭﺍﻟﺧﻁﻭﻁ‬..‫ﺍﻟﺦ‬‫ﻣﻥ‬ ‫ﺍﻷﻣﻭﺭ‬‫ﺍﻟﺗﻲ‬‫ﺗﻌﻠﻣﻧﺎﻫﺎ‬‫ﺳﺎﺑﻘﺎ‬‫ﻭﻏﻳﺭﻫﺎ‬‫ﺍﻟﻣﺯﻳﺩ‬0_o_^*
  59. 59. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻭﺍﻵﻥ‬‫ﻟﻧﺷﺎﻫﺩ‬‫ﻣﺛﺎﻻ‬:7-‫ﺃ‬:‫ﺑﻌﺩ‬‫ﻣﺷﺎﻫﺩﺓ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﻭﺍﻟﺗﺭﻛﻳﺯ‬‫ﻋﻠﻰ‬‫ﻣﺎ‬‫ﺗﻡ‬ ،‫ﺗﻅﻠﻳﻠﻪ‬‫ﺇﻧﺗﻘﻝ‬‫ﻟﻠﺷﺭﻳﺣﺔ‬‫ﺍﻟﺗﺎﻟﻳﺔ‬_^*
  60. 60. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺃﻭﻻ‬‫ﻛﻣﺎ‬،‫ﺗﻼﺣﻅ‬‫ﻓﺈﻥ‬‫ﻫﺫﺍ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﻳﻣﺛﻝ‬‫ﺭﺳﻡ‬‫ﺗﺩﺭﺝ‬‫ﻝ‬fillRect‫ﻋﻠﻰ‬ ‫ﺣﺟﻣﻪ‬،‫ﺍﻟﻛﺎﻣﻝ‬‫ﻭﻧﻭﻉ‬‫ﺍﻟﺗﺩﺭﺝ‬‫ﺧﻁﻲ‬^^،‫ﻟﻛﻥ‬‫ﻣﺎ‬‫ﻫﺫﻩ‬‫ﺍﻷﺭﻗﺎﻡ‬‫ﺍﻟﻣﻭﺟﻭﺩﺓ‬ ‫ﺩﺍﺧﻝ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ؟‬ ‫ﺍﻟﺻﻳﻐﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬: context.createLinearGradient(x0,y0,x1,y1); X0:‫ﺍﻹﺣﺩﺍﺛﻲ‬‫ﺍﻟﺳﻳﻧﻲ‬‫ﻟﻧﻘﻁﺔ‬‫ﺑﺩﺍﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬. Y0:‫ﺍﻹﺣﺩﺍﺛﻲ‬‫ﺍﻟﺻﺎﺩﻱ‬‫ﻟﻧﻘﻁﺔ‬‫ﺑﺩﺍﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬. X1:‫ﺍﻹﺣﺩﺍﺛﻲ‬‫ﺍﻟﺳﻳﻧﻲ‬‫ﻟﻧﻘﻁﺔ‬‫ﻧﻬﺎﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬. X2:‫ﺍﻹﺣﺩﺍﺛﻲ‬‫ﺍﻟﺻﺎﺩﻱ‬‫ﻟﻧﻘﻁﺔ‬‫ﻧﻬﺎﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬.==<‫ﺗﺎﺑﻊ‬
  61. 61. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺃﻣﺎ‬‫ﺍﻟﺩﺍﻟﺔ‬addColorStop():‫ﻓﻬﻲ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﺍﻟﻣﺳﺅﻭﻟﺔ‬‫ﻋﻥ‬‫ﺗﺣﺩﻳﺩ‬ ‫ﺍﻷﻟﻭﺍﻥ‬‫ﺍﻟﺧﺎﺻﺔ‬،‫ﺑﺎﻟﺗﺩﺭﺝ‬‫ﻭﺍﻟﻧﻘﺎﻁ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﻧﻬﺎﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬‫ﻟﻛﻝ‬،‫ﻟﻭﻥ‬ ‫ﻭﻳﺗﻡ‬‫ﺗﻣﺛﻳﻝ‬‫ﺍﻟﻧﻘﻁ‬‫ﻣﻥ‬0‫ﺍﻟﻰ‬1_^*. ‫ﻣﻼﺣﻅﺔ‬:‫ﻳﺗﻡ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻝ‬object‫ﺍﻟﺧﺎﺹ‬‫ﺑﺎﻟﺗﺩﺭﺝ‬‫ﻋﻠﻰ‬‫ﺷﻛﻝ‬‫ﻗﻳﻣﺔ‬ )value(‫ﺗﻭﺿﻊ‬‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬strokeStyle‫ﺃﻭ‬fillStyle_^* ‫ﻣﻼﺣﻅﺔ‬2:‫ﻓﻲ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﻗﻣﺕ‬‫ﺑﺎﻟﺗﺣﻛﻡ‬‫ﺑﺎﺗﺟﺎﻩ‬‫ﺍﻟﺗﺩﺭﺝ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺗﺣﺩﻳﺩ‬ ‫ﺍﻟﻘﻳﻡ‬‫ﻟﺑﺩﺍﻳﺔ‬‫ﻭﻧﻬﺎﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬‫ﺩﺍﺧﻝ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﺑﺣﻳﺙ‬‫ﻛﺎﻥ‬‫ﻳﺑﺩﺃ‬0‫ﻭﻳﻧﺗﻬﻲ‬256 ،‫ﺳﻳﻧﻳﺎ‬‫ﻭﻳﺑﺩﺃ‬‫ﻭﻳﻧﺗﻬﻲ‬0‫ﺻﺎﺩﻳﺎ‬_^*...‫ﻭﺍﻟﻌﻛﺱ‬‫ﺻﺣﻳﺢ‬..
  62. 62. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬7-‫ﺏ‬:‫ﻻﺣﻅ‬‫ﺍﻟﺩﻭﺭ‬‫ﺍﻟﺗﻲ‬‫ﺗﻠﻌﺑﻪ‬‫ﺍﻟﻘﻳﻡ‬‫ﻟﺗﻐﻳﺭ‬‫ﺷﻛﻝ‬‫ﺍﻟﺗﺩﺭﺝ‬_^*
  63. 63. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬7-‫ﺝ‬:
  64. 64. ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing( ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ،‫ﻭﺑﻬﺫﺍ‬‫ﻧﻛﻭﻥ‬‫ﺇﻧﺗﻬﻳﻧﺎ‬‫ﺑﻔﺿﻝ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬‫ﻣﻥ‬‫ﻫﺫﻩ‬‫ﺍﻟﺟﺯﺋﻳﺔ‬‫ﻭﻫﺫﺍ‬‫ﺍﻟﻣﻭﺿﻭﻉ‬ ‫ﻣﻥ‬،‫ﺍﻟﺩﻭﺭﺓ‬‫ﻭﺍﻵﻥ‬‫ﺳﻧﻧﺗﻘﻝ‬‫ﻣﻌﺎ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬‫ﺍﻟﻰ‬‫ﺟﺯﺋﻳﺔ‬‫ﺟﺩﻳﺩﺓ‬ ‫ﻭﻣﻭﺿﻭﻉ‬،‫ﺟﺩﻳﺩ‬‫ﻟﻛﻥ‬‫ﺃﻛﺭﺭ‬،‫ﻣﺟﺩﺩﺍ‬‫ﺍﻟﺗﻁﺑﻳﻖ‬‫ﻣﻬﻡ‬‫ﺟﺩﺍ‬‫ﺇﺫﺍ‬‫ﺭﻏﺑﺕ‬‫ﺑﺎﻟﺗﻌﻠﻡ‬ ‫ﻭﺗﻁﻭﻳﺭ‬‫ﻣﻬﺎﺭﺍﺗﻙ‬..‫ﻁﺑﻖ‬،‫ﺍﻷﻣﺛﻠﺔ‬‫ﻭﺇﻥ‬‫ﻭﺍﺟﻬﺗﻙ‬‫ﺃﻱ‬‫ﻣﺷﻛﻠﺔ‬‫ﺇﺑﺣﺙ‬‫ﻭﺍﻗﺭﺃ‬ ‫ﻭﺃﻋﺩ‬‫ﺍﻟﻛﺭﺓ‬‫ﺳﺗﻧﺟﺢ‬‫ﺑﻛﻝ‬‫ﺗﺄﻛﻳﺩ‬....‫ﻭﻣﻥ‬‫ﺑﺎﺏ‬‫ﺍﻟﺗﺭﻛﻳﺯ‬‫ﻋﻠﻰ‬‫ﺗﻁﻭﻳﺭ‬ ،‫ﻣﻬﺎﺭﺍﺗﻛﻡ‬‫ﺃﺭﺟﻭﺍ‬‫ﻣﻧﻛﻡ‬‫ﺍﻹﻁﻼﻉ‬)‫ﺍﻟﺑﺣﺙ‬(‫ﻋﻥ‬‫ﺍﻟﺩﺍﻟﺔ‬: createRadialGradient‫ﻷﻧﻧﺎ‬‫ﺳﻧﺳﺗﺧﺩﻣﻬﺎ‬‫ﻓﻲ‬‫ﺍﻟﻣﻭﺿﻭﻉ‬‫ﺍﻟﺟﺩﻳﺩ‬ ‫ﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﻋﺭﺿﻬﺎ‬‫ﻓﻲ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﺭﻗﻡ‬7_^*: ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬
  65. 65. ‫ﻣﻥ‬ ‫ﻣﻧﻘﻭﻝ‬:‫ﺍﻟﻌﺛﻣﺎﻧﻳﺔ‬ ‫ﺍﻻﻣﺑﺭﺍﻁﻭﺭﻳﺔ‬Ottoman empire| |
  66. 66. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻓﻲ‬‫ﻫﺫﺍ‬‫ﺍﻟﻔﺻﻝ‬‫ﺳﻧﺗﻌﻠﻡ‬‫ﻣﻌﺎ‬‫ﻛﻳﻑ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺭﺳﻡ‬‫ﺷﻛﻝ‬‫ﺃﻭ‬‫ﻣﺧﻁﻁ‬‫ﺑﻳﺎﻧﻲ‬‫ﻣﻥ‬ ‫ﺧﻼﻝ‬‫ﻣﺎ‬‫ﺗﻌﻠﻣﻧﺎﻩ‬،‫ﺳﺎﺑﻘﺎ‬‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬‫ﺑﻌﺽ‬‫ﺍﻟﺣﺭﻛﺎﺕ‬‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺑﺳﻳﻁﺔ‬‫ﻭﺍﻟﺗﻲ‬‫ﻧﻌﻠﻣﻬﺎ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﻣﻌﺭﻓﺗﻧﺎ‬‫ﻟﻠﺟﺎﻓﺎ‬،‫ﺳﻛﺭﺑﺕ‬‫ﻓﻣﺛﻼ‬‫ﻟﻭ‬ ‫ﺇﺣﺗﺟﻧﺎ‬‫ﺍﻵﻥ‬‫ﻟﺭﺳﻡ‬‫ﻣﺧﻁﻁ‬‫ﺑﻳﺎﻧﻲ‬‫ﺑﺄﺑﺳﻁ‬‫ﺃﺷﻛﺎﻟﻪ‬‫ﻛﻣﺎ‬‫ﻳﻅﻬﺭ‬‫ﻓﻲ‬‫ﻫﺫﻩ‬ ،‫ﺍﻟﺻﻭﺭﺓ‬‫ﻣﺎ‬‫ﻫﻲ‬‫ﺍﻟﺷﻳﻔﺭﺓ‬‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬‫ﺍﻟﺗﻲ‬‫ﺳﺗﻘﻭﻡ‬‫ﺑﻛﺗﺎﺑﺗﻬﺎ؟‬ ‫ﻫﺫﻩ‬‫ﺍﻟﺭﺳﻣﺔ‬‫ﺍﻟﺑﺳﻳﻁﺔ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺗﻧﻔﻳﺫﻫﺎ‬‫ﺑﻛﻝ‬‫ﺑﺳﻁﺔ‬‫ﻣﻥ‬ ‫ﺧﻼﻝ‬‫ﺟﻣﻠﺔ‬‫ﺩﻭﺭﺍﻥ‬‫ﻭﺍﺣﺩﺓ‬)‫ﺟﺎﻓﺎ‬‫ﺳﻛﺭﺑﺕ‬(‫ﺑﺎﻹﺿﺎﻓﺔ‬ ‫ﺍﻟﻰ‬‫ﻣﺎ‬‫ﺗﻌﻠﻣﻧﺎﻩ‬‫ﺳﺎﺑﻘﺎ‬‫ﻓﻲ‬‫ﺍﻝ‬Canvas..‫ﻭﻟﻧﻔﺭﺽ‬ ‫ﺃﻥ‬‫ﻫﺫﻩ‬‫ﻫﻲ‬‫ﺍﻟﻘﻳﻡ‬‫ﺍﻟﻣﺳﺗﺧﺩﻣﺔ‬16,68,20,30,54
  67. 67. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻭﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﺍﻟﺷﻳﻔﺭﺓ‬‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬: ‫ﻛﻣﺎ‬‫ﺗﻼﺣﻅ‬‫ﻓﺈﻧﻧﻲ‬ ‫ﻗﻣﺕ‬‫ﺑﺈﻧﺷﺎء‬‫ﻭﺭﺳﻡ‬ ‫ﻫﺫﺍ‬‫ﺍﻟﺷﻛﻝ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬ ‫ﺑﺷﻛﻠﻪ‬‫ﺍﻟﺫﻱ‬‫ﺗﺭﺍﻩ‬‫ﺑﻬﺫﻩ‬ ‫ﺍﻷﺳﻁﺭ‬،‫ﺍﻟﻘﻠﻳﻠﺔ‬‫ﺍﻝ‬ Data‫ﺗﻣﺛﻝ‬‫ﻣﺟﻣﻭﻋﺔ‬ ‫ﺍﻟﻘﻳﻡ‬‫ﻟﻠﻣﺳﺗﻁﻳﻼﺕ‬ ‫ﺩﺍﺧﻝ‬‫ﺍﻟﺷﻛﻝ‬،‫ﺍﻟﺑﻳﺎﻧﻲ‬ ‫ﻭﺳﺑﺏ‬‫ﻭﺟﻭﺩ‬‫ﻋﻣﻠﻳﺎﺕ‬ ‫ﺍﻟﺿﺭﺏ‬)i*100(‫ﻭ‬ dp * 5‫ﻫﻭ‬‫ﺗﻧﺳﻳﻖ‬ ‫ﺍﻟﺷﻛﻝ‬...‫ﻟﻛﻥ‬..
  68. 68. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻟﻛﻥ‬‫ﻫﻧﺎﻙ‬‫ﻋﺩﺓ‬‫ﻣﺷﺎﻛﻝ‬‫ﻓﻲ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬،‫ﺍﻟﺳﺎﺑﻖ‬‫ﻭﻗﺑﻝ‬‫ﺍﻟﺑﺩء‬‫ﺑﺄﻭﻝ‬ ‫ﻣﺷﻛﻠﺔ‬‫ﺃﻧﻭﻩ‬‫ﺃﻥ‬‫ﺍﻟﻌﻣﻠﻳﺎﺕ‬‫ﺍﻟﺗﻲ‬‫ﻗﻣﻧﺎ‬‫ﺑﻬﺎ‬‫ﻣﻥ‬‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬rect‫ﻫﻲ‬‫ﺑﻛﻝ‬ ‫ﺑﺳﺎﻁﺔ‬‫ﻟﺗﻧﺳﻳﻖ‬،‫ﺍﻟﺷﻛﻝ‬‫ﻭﺇﻋﻁﺎﺋﻪ‬‫ﺷﻛﻼ‬،‫ﺣﻘﻳﻘﻳﺎ‬‫ﻟﻛﻥ‬‫ﻫﺫﺍ‬‫ﻻ‬‫ﻳﻌﻧﻲ‬‫ﺃﻥ‬ ‫ﺍﻟﻘﻳﻡ‬،‫ﻋﺷﻭﺍﺋﻳﺔ‬‫ﺑﻝ‬‫ﺇﻥ‬‫ﺍﻟﻌﻣﻠﻳﺎﺕ‬‫ﺍﻟﺗﻲ‬‫ﺳﻧﻘﻭﻡ‬‫ﺑﺈﺳﺗﺧﺩﺍﻣﻬﺎ‬‫ﻫﻧﺎ‬‫ﺳﺗﺅﺛﺭ‬‫ﺑﻛﻝ‬ ‫ﺗﺄﻛﻳﺩ‬‫ﻋﻠﻰ‬‫ﺷﻛﻝ‬،‫ﺍﻟﻣﺧﺭﺟﺎﺕ‬‫ﻭﺑﻬﺫﺍ‬‫ﻓﺈﻥ‬‫ﺃﻱ‬‫ﻋﻣﻠﻳﺔ‬‫ﻳﺟﺏ‬‫ﺃﻥ‬‫ﺗﺗﻧﺎﺳﺏ‬ ‫ﺑﺷﻛﻝ‬‫ﺧﻁﻲ‬‫ﻣﻊ‬‫ﺟﻣﻳﻊ‬‫ﻣﺎ‬‫ﺳﻳﺗﻡ‬‫ﻋﻣﻠﻪ‬‫ﻻﺣﻘﺎ‬...)‫ﻓﻲ‬‫ﺧﺿﻡ‬‫ﺍﻟﺣﺎﻻﺕ‬‫ﺍﻟﺗﻲ‬ ‫ﺳﻧﺗﻁﺭﻕ‬‫ﺍﻟﻳﻬﺎ‬‫ﻫﻧﺎ‬(.. ‫ﻭﺍﻵﻥ‬‫ﺍﻟﻣﺷﻛﻠﺔ‬‫ﺍﻵﻭﻟﻰ‬‫ﺗﻛﻣﻥ‬‫ﻓﻲ‬‫ﺃﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬‫ﻳﺑﺩﺃ‬‫ﻣﻥ‬‫ﺍﻷﻋﻠﻰ‬‫ﺍﻟﻰ‬ ،‫ﺍﻷﺳﻔﻝ‬‫ﻭﻫﺫﺍ‬‫ﺍﻷﻣﺭ‬،‫ﻁﺑﻳﻌﻲ‬‫ﻷﻧﻧﺎ‬‫ﺗﺣﺩﺛﻧﺎ‬‫ﻓﻲ‬‫ﺑﺩﺍﻳﺔ‬‫ﺍﻟﺩﻭﺭﺓ‬‫ﺃﻥ‬‫ﺍﻝ‬ Canvas‫ﻳﻌﺗﻣﺩ‬‫ﺃﻋﻠﻰ‬‫ﻳﺳﺎﺭﻩ‬‫ﻛﻧﻘﻁﺔ‬‫ﺇﻧﻁﻼﻕ‬‫ﺍﻟﺭﺳﻡ‬_^*،‫ﻭﺍﻵﻥ‬‫ﻛﻳﻑ‬ ‫ﻳﻣﻛﻧﻧﺎ‬‫ﺣﻝ‬‫ﻫﺫﻩ‬‫ﺍﻟﻣﺷﻛﻠﺔ؟‬
  69. 69. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬: ‫ﻻﺣﻅ‬،‫ﺍﻟﻣﺛﺎﻝ‬‫ﻭﻻﺣﻅ‬‫ﺃﻥ‬‫ﺍﻟﺗﻐﻳﻳﺭ‬‫ﺣﺩﺙ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺗﻐﻳﻳﺭ‬‫ﻗﻳﻣﺔ‬)Y(،‫ﻭﻳﺗﻡ‬ ‫ﺫﻟﻙ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺣﺳﺎﺏ‬‫ﺇﺭﺗﻔﺎﻉ‬‫ﺍﻝ‬canvas‫ﻭﻫﻭ‬500‫ﻣﻁﺭﻭﺣﺎ‬‫ﻣﻧﻪ‬
  70. 70. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺇﺭﺗﻔﺎﻉ‬‫ﺍﻟﻌﺎﻣﻭﺩ‬‫ﻭﻫﻭ‬‫ﻫﻧﺎ‬)dp * 5(‫ﻣﻁﺭﻭﺣﺎ‬‫ﻣﻧﻪ‬‫ﺃﻳﺿﺎ‬‫ﻗﻳﻣﺔ‬‫ﺃﺧﺭﻯ‬ ‫ﺇﺿﺎﻓﻳﺔ‬‫ﻭﻫﻲ‬30‫ﻭﺗﻣﺛﻝ‬‫ﻫﺫﻩ‬‫ﻗﻳﻣﺔ‬‫ﺗﻧﺳﻳﻘﻳﺔ‬،‫ﻓﻘﻁ‬‫ﺑﺣﻳﺙ‬‫ﻟﻭ‬‫ﺗﺭﻛﺕ‬0‫ﻓﻲ‬ ‫ﺍﻟﻣﺛﺎﻝ‬‫ﺍﻟﺳﺎﺑﻖ‬‫ﺳﺗﺑﺩﺃ‬‫ﺍﻷﻋﻣﺩﺓ‬‫ﻣﻥ‬‫ﺍﻟﺧﻁ‬‫ﺍﻟﺳﻔﻠﻲ‬‫ﻟﻝ‬canvas..._^* ‫ﻭﺍﻵﻥ‬‫ﺑﻌﺩ‬‫ﺍﻹﻧﺗﻬﺎء‬‫ﻣﻥ‬‫ﺣﻝ‬‫ﺍﻟﻣﺷﻛﻠﺔ‬‫ﺍﻷﻭﻟﻰ‬‫ﻧﻧﺗﻘﻝ‬‫ﺍﻟﻰ‬‫ﺍﻟﻣﺷﻛﻠﺔ‬‫ﺍﻟﺛﺎﻧﻳﺔ‬ ‫ﻭﻫﻲ‬‫ﺃﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬‫ﻳﻭﺟﺩ‬‫ﻟﻪ‬‫ﺧﻁﻭﻁ‬‫ﻭﻋﻧﺎﻭﻳﻥ‬‫ﺑﺣﻳﺙ‬‫ﺗﻣﺛﻝ‬‫ﺍﻟﻘﻳﻡ‬‫ﻟﻛﻝ‬ ‫ﻋﺎﻣﻭﺩ‬،‫ﺑﻳﺎﻧﻲ‬‫ﻭﺗﻣﺛﻝ‬‫ﻣﺎﻫﻳﺔ‬‫ﻫﺫﺍ‬‫ﺍﻟﻌﺎﻣﻭﺩ‬..‫ﻭﻫﺫﺍ‬‫ﺍﻷﻣﺭ‬‫ﻳﻣﻛﻥ‬‫ﺣﻠﻪ‬‫ﺃﻳﺿﺎ‬ ‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻟﺭﺳﻡ‬_^*..‫ﻟﻧﺷﺎﻫﺩ‬‫ﺫﻟﻙ‬‫ﻣﻌﺎ‬^_^
  71. 71. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬: ‫ﺷﻳﺋﺎ‬ ‫ﻳﺗﺿﺢ‬ ‫ﺑﺩء‬ ‫ﺍﻟﺑﻳﺎﻧﻲ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺃﻥ‬ ‫ﻛﻳﻑ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬ ‫ﻻﺣﻅ‬ ‫ﺃﻋﻣﺩﺓ‬ ‫ﺃﻥ‬ ‫ﻭﻫﻲ‬ ،‫ﺃﻳﺿﺎ‬ ‫ﻣﺷﻛﻠﺔ‬ ‫ﻓﻳﻪ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻟﻛﻥ‬ ،‫ﻓﺷﻳﺋﺎ‬ ‫ﻟﺫﻟﻙ‬ ،‫ﺍﻟﺑﻳﺎﻧﻲ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﺧﻁﻭﻁ‬ ‫ﺃﺳﻔﻝ‬ ‫ﺧﺎﺭﺟﺔ‬ ‫ﺍﻟﺑﻳﺎﻥ‬ ‫ﻣﻧﻬﺎ‬ ‫ﻟﻧﺗﺧﻠﺹ‬ ‫ﻣﺛﺎﻻ‬ ‫ﻟﻧﺷﺎﻫﺩ‬:P..
  72. 72. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬: ‫ﻻﺣﻅ‬‫ﻓﻲ‬‫ﻫﺫﺍ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﺃﻥ‬‫ﺍﻟﺗﻐﻳﻳﺭ‬‫ﻛﺎﻥ‬ ‫ﻋﻠﻰ‬‫ﺳﻁﺭ‬،‫ﻭﺍﺣﺩ‬‫ﻭﻫﻭ‬‫ﺍﻟﺳﻁﺭ‬‫ﺍﻟﺧﺎﺹ‬ ‫ﺑﺭﺳﻡ‬،‫ﺍﻷﻋﻣﺩﺓ‬‫ﻓﻘﻁ‬‫ﻗﻣﻧﺎ‬‫ﺑﺎﻟﺗﻌﺩﻳﻝ‬‫ﻋﻠﻳﻪ‬ ‫ﻟﺗﺑﺩﺃ‬‫ﺍﻷﻋﻣﺩﺓ‬‫ﻣﻥ‬‫ﻧﻘﺎﻁ‬‫ﻣﺧﺗﻠﻔﺔ‬^^ ‫ﻣﻼﺣﻅﺔ‬:‫ﺍﻟﻘﻳﻡ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬‫ﺑﺎﻷﻣﺛﻠﺔ‬‫ﻟﺗﻣﺛﻳﻝ‬‫ﻋﻧﺎﻭﻳﻥ‬ ‫ﺍﻷﻋﻣﺩﺓ‬‫ﻏﻳﺭ‬،‫ﺩﻗﻳﻘﺔ‬‫ﺍﻟﻬﺩﻑ‬‫ﻣﻧﻬﺎ‬‫ﻓﻘﻁ‬‫ﺗﻭﺿﻳﺢ‬‫ﻭﺑﻧﺎء‬‫ﺍﻟﻣﺛﺎﻝ‬...
  73. 73. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻭﺍﻵﻥ‬‫ﻣﺎﺫﺍ‬‫ﻋﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬‫ﺍﻟﺩﺍﺋﺭﻱ‬)Piechart(‫؟‬ ‫ﻫﻝ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺭﺳﻣﻪ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬canvas‫؟‬ ‫ﺍﻟﺟﻭﺍﺏ‬‫ﺑﻛﻝ‬‫ﺗﺄﻛﻳﺩ‬،‫ﻧﻌﻡ‬‫ﻟﻧﺄﺧﺫ‬‫ﻣﺛﺎﻻ‬‫ﺳﺭﻳﻌﺎ‬‫ﻋﻠﻰ‬‫ﺫﻟﻙ‬_^* ‫ﺍﻟﺧﻁﻭﺍﺕ‬)‫ﺳﻧﻌﺗﻣﺩ‬‫ﻋﻠﻰ‬‫ﺍﻟﻘﻳﻡ‬‫ﺍﻟﺗﻲ‬‫ﺇﺳﺗﺧﺩﻣﻧﺎﻫﺎ‬‫ﻓﻲ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺳﺎﺑﻘﺔ‬(: 1(‫ﺳﻧﻘﻭﻡ‬‫ﺑﺈﺿﺎﻓﺔ‬‫ﻣﺻﻔﻭﻓﺔ‬‫ﺗﺣﺗﻭﻱ‬‫ﻣﺟﻣﻭﻋﺔ‬‫ﻣﻥ‬‫ﺍﻷﻟﻭﺍﻥ‬‫ﻟﻛﻝ‬‫ﻗﻳﻣﺔ‬– ‫ﻭﻫﺫﺍ‬‫ﻳﻌﻧﻲ‬‫ﺃﻥ‬‫ﻛﻝ‬‫ﻟﻭﻥ‬‫ﺳﻳﻣﺛﻝ‬‫ﻫﺫﻩ‬‫ﺍﻟﻘﻳﻣﺔ‬–
  74. 74. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com 2(‫ﺳﻧﻘﻭﻡ‬‫ﺑﺣﺳﺎﺏ‬‫ﻣﺟﻣﻭﻉ‬‫ﺟﻣﻳﻊ‬‫ﺍﻟﻘﻳﻡ‬‫ﺍﻟﻣﻭﺟﻭﺩﺓ‬‫ﻟﺩﻳﻧﺎ‬: 3(‫ﺍﻵﻥ‬‫ﻳﺟﺏ‬‫ﻋﻠﻳﻧﺎ‬‫ﺗﺣﺩﻳﺩ‬‫ﻣﺭﻛﺯ‬،‫ﺍﻟﺩﺍﺋﺭﺓ‬‫ﻭﺳﻧﻔﺭﺽ‬‫ﺃﻥ‬‫ﻣﺭﻛﺯ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬ ‫ﺳﻳﻛﻭﻥ‬‫ﻓﻲ‬‫ﺍﻟﻧﻘﻁﺔ‬250,250‫ﺃﻱ‬‫ﻓﻲ‬‫ﻣﻧﺗﺻﻑ‬‫ﺍﻝ‬canvas، ‫ﺑﻌﺩ‬‫ﺫﻟﻙ‬‫ﺳﻧﻘﻭﻡ‬‫ﺑﺣﺳﺎﺏ‬‫ﺍﻟﺯﺍﻭﻳﺔ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﻛﻝ‬،‫ﻗﻳﻣﺔ‬‫ﻭﻣﻥ‬‫ﺛﻡ‬‫ﺭﺳﻣﻬﺎ‬ ‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬arc،‫ﻭﺣﺗﻰ‬‫ﻳﺗﻡ‬‫ﺍﻹﻧﺗﻘﺎﻝ‬‫ﻣﻥ‬‫ﻗﻭﺱ‬‫ﺍﻟﻰ‬‫ﺁﺧﺭ‬)‫ﻣﻥ‬‫ﻣﻧﺣﻧﻰ‬‫ﺃﻭ‬ ‫ﺯﺍﻭﻳﺔ‬‫ﺍﻟﻰ‬‫ﺃﺧﺭﻯ‬‫ﺑﻌﺩ‬‫ﺍﻹﻧﺗﻬﺎء‬‫ﻣﻥ‬‫ﺭﺳﻣﻬﺎ‬‫ﻧﺣﻔﻅ‬‫ﻗﻳﻣﺔ‬‫ﺍﻟﻘﻭﺱ‬‫ﺍﻟﺳﺎﺑﻖ‬..(
  75. 75. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻟﻳﺻﺑﺢ‬‫ﻟﺩﻳﻧﺎ‬ ‫ﻫﺫﻩ‬‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬:
  76. 76. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﺍﻟﺩﺍﻟﺔ‬arc:‫ﺗﺳﺗﺧﺩﻡ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﻓﻲ‬‫ﺍﻝ‬canvas‫ﻟﺭﺳﻡ‬‫ﺃﻗﻭﺍﺱ‬‫ﺃﻭ‬ ‫ﻣﻧﺣﻧﻳﺎﺕ‬)‫ﻭﺍﻟﺗﻲ‬‫ﺗﺳﺗﺧﺩﻡ‬‫ﻟﺭﺳﻡ‬‫ﺍﻟﺩﻭﺍﺋﺭ‬‫ﺃﻭ‬‫ﺃﺟﺯﺍء‬‫ﻣﻥ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬( ‫ﺍﻟﺻﻳﻐﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬‫ﻟﻬﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﻫﻲ‬: ‫ﺍﻝ‬x:‫ﺗﻣﺛﻝ‬‫ﺍﻟﻘﻳﻣﺔ‬‫ﺍﻟﻣﺣﻭﺭ‬‫ﺍﻟﺳﻳﻧﻲ‬‫ﻟﻣﺭﻛﺯ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬. ‫ﺍﻝ‬y:‫ﺗﻣﺛﻝ‬‫ﺍﻟﻘﻳﻣﺔ‬‫ﺍﻟﻣﺣﻭﺭ‬‫ﺍﻟﺻﺎﺩﻱ‬‫ﻟﻣﺭﻛﺯ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬. ‫ﺍﻝ‬r:‫ﺗﻣﺛﻝ‬‫ﻧﺻﻑ‬‫ﻗﻁﺭ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬. ‫ﺍﻝ‬sAngle:‫ﺗﻣﺛﻝ‬‫ﺍﻟﺯﺍﻭﻳﺔ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﺑﺩﺃ‬‫ﺍﻟﺭﺳﻡ‬‫ﻟﻠﻣﻧﺣﻧﻰ‬‫ﺃﻭ‬‫ﺍﻟﻘﻭﺱ‬. ‫ﺍﻝ‬eAngle:‫ﺗﻣﺛﻝ‬‫ﻧﻘﻁﺔ‬‫ﺇﻧﺗﻬﺎء‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﺎﻟﺯﺍﻭﻳﺔ‬. ‫ﺍﻝ‬counterclockwise:‫ﻗﻳﻣﺔ‬‫ﺇﺧﺗﻳﺎﺭﻳﺔ‬‫ﻗﻳﻣﺗﻬﺎ‬‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬false‫ﺃﻱ‬ ‫ﺃﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﺳﻳﻛﻭﻥ‬‫ﻣﻊ‬‫ﻋﻘﺎﺭﺏ‬،‫ﺍﻟﺳﺎﻋﺔ‬true‫ﺗﻌﻧﻲ‬‫ﺍﻟﺭﺳﻡ‬‫ﻋﻛﺱ‬‫ﻋﻘﺎﺭﺏ‬ ‫ﺍﻟﺳﺎﻋﺔ‬..
  77. 77. Making Charts ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﻼﺣﻅﺔ‬:‫ﻟﺭﺳﻡ‬‫ﺩﺍﺋﺭﺓ‬‫ﻛﺎﻣﻠﺔ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬arc‫ﻗﻡ‬‫ﺑﺟﻌﻝ‬‫ﺍﻝ‬sAngle ‫ﻳﺳﺎﻭﻱ‬0‫ﻭﺍﻝ‬eAngle‫ﻳﺳﺎﻭﻱ‬2* Math.PI ،‫ﻭﺍﻵﻥ‬‫ﻟﻧﺷﺎﻫﺩ‬‫ﺟﻣﻳﻊ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺳﺎﺑﻘﺔ‬‫ﻣﻌﺎ‬^_^: ‫ﻣﻼﺣﻅﺔ‬2:‫ﺟﻣﻳﻊ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺳﺎﺑﻘﺔ‬‫ﺗﻡ‬‫ﻧﻘﻠﻬﺎ‬‫ﻣﻥ‬ Canvas Deep Dive - chapter 2 Hands On: Making Charts ‫ﻫﺫﺍ‬‫ﺍﻟﻔﺻﻝ‬‫ﻭﻫﺫﺍ‬‫ﺍﻟﻣﻭﺿﻭﻉ‬‫ﻳﻣﺛﻝ‬‫ﻓﻌﻠﻳﺎ‬‫ﻓﻛﺭﺓ‬‫ﻋﻣﻠﻳﺔ‬‫ﻋﻠﻰ‬‫ﺗﻁﻳﺑﻖ‬‫ﺍﻷﻓﻛﺎﺭ‬ ‫ﺍﻟﺗﻲ‬‫ﺗﻌﻠﻣﻧﺎﻫﺎ‬‫ﻓﻲ‬‫ﺍﻟﻔﺻﻝ‬‫ﺍﻷﻭﻝ‬‫ﻣﻥ‬‫ﻫﺫﻩ‬،‫ﺍﻟﺩﻭﺭﺓ‬‫ﻭﺗﻁﺑﻳﻖ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﻭﺍﻟﺳﻳﺭ‬‫ﻣﻌﻧﺎ‬‫ﺧﻁﻭﺓ‬‫ﺑﺧﻁﻭﺓ‬‫ﻫﻭ‬‫ﺃﻣﺭ‬‫ﻣﻬﻡ‬..‫ﻓﻼ‬‫ﺗﻧﺳﻰ‬‫ﺫﻟﻙ‬.._^* ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬
  78. 78. ‫ﺍﻟﺣﻳﺎﺓ‬ ‫ﻓﻥ‬–‫ﺫﺍﻛﺭ‬ ‫ﻋﺑﺩﺍﻟﺭﺣﻣﻥ‬ ‫ﺍﻟﺩﻛﺗﻭﺭ‬
  79. 79. Image Fills ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻟﻘﺩ‬‫ﺗﺣﺩﺛﻧﺎ‬‫ﻓﻲ‬‫ﺍﻟﻣﻭﺿﻭﻉ‬‫ﺍﻷﻭﻝ‬‫ﺑﻬﺫﻩ‬‫ﺍﻟﺩﻭﺭﺓ‬‫ﻋﻥ‬‫ﻁﺭﻳﻘﺔ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺑﺎﻷﺷﻛﺎﻝ‬‫ﻭﺍﻟﺻﻭﺭ‬‫ﻭﺍﻟﺧﻁﻭﻁ‬..‫ﺍﻟﺦ‬‫ﻣﻥ‬‫ﺍﻷﻣﻭﺭ‬‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬Canvas، ‫ﻭﺍﻵﻥ‬‫ﻧﺄﺗﻲ‬‫ﻟﻧﺗﻁﺭﻕ‬‫ﺍﻟﻰ‬‫ﻧﻘﻁﺔ‬‫ﺃﺧﺭﻯ‬‫ﻭﻫﻲ‬‫ﻛﻳﻑ‬‫ﻳﻣﻛﻧﻧﻲ‬‫ﺗﻌﺑﺔ‬‫ﺍﻝ‬ Canvas‫ﺑﺻﻭﺭﺓ‬‫ﺑﺣﻳﺙ‬‫ﺗﺗﺧﺫ‬‫ﺃﻧﻣﺎﻁﺎ‬‫ﻣﺗﻌﺩﺩﺓ‬‫ﺃﻭ‬،‫ﻣﺧﺗﻠﻔﺔ‬‫ﻭﻟﻳﻛﻭﻥ‬ ‫ﻫﺫﺍ‬‫ﺍﻷﻣﺭ‬‫ﻣﻔﻬﻭﻣﺎ‬‫ﺑﺳﻼﺳﺔ‬‫ﻫﻝ‬‫ﺇﺳﺗﺧﺩﻣﺕ‬‫ﺍﻝ‬repeat‫ﻣﻥ‬‫ﻗﺑﻝ‬‫ﻣﻊ‬ ‫ﺍﻟﺻﻭﺭ‬‫ﻓﻲ‬‫ﺍﻝ‬css‫؟‬:[،‫ﺍﺫﺍ‬‫ﺇﺳﺗﺧﺩﻣﺗﻬﺎ‬‫ﺃﻭ‬‫ﻟﻡ‬‫ﺗﺳﺗﺧﺩﻣﻬﺎ‬‫ﻳﻣﻛﻧﻙ‬ ‫ﺍﻵﻥ‬‫ﻣﺷﺎﻫﺩﺓ‬‫ﻫﺫﻩ‬‫ﺍﻟﻌﻣﻠﻳﺔ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬Canvas،‫ﻟﻛﻥ‬‫ﻣﺎ‬‫ﻫﻲ‬ ‫ﺍﻟﺩﺍﻟﺔ‬‫ﺍﻟﺗﻲ‬‫ﺳﺗﻣﻛﻧﻧﺎ‬‫ﻣﻥ‬‫ﻣﺷﺎﻫﺩﺓ‬‫ﻫﺫﻩ‬‫ﺍﻟﻧﺗﺎﺋﺞ؟‬ ‫ﺍﻟﺟﻭﺍﺏ‬‫ﻫﻭ‬:createPattern()
  80. 80. Image Fills ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com createPattern():‫ﺗﺳﺗﺧﺩﻡ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﻟﺗﻛﺭﺍﺭ‬‫ﺍﻟﻌﻧﺻﺭ‬‫ﻓﻲ‬‫ﺍﻹﺗﺟﺎﻩ‬ ‫ﺍﻟﺫﻱ‬‫ﻳﺗﻡ‬،‫ﺗﺣﺩﻳﺩﻩ‬‫ﻭﺍﻟﺻﻳﻐﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬‫ﻟﻪ‬‫ﻫﻲ‬: ‫ﺍﻝ‬element:‫ﻳﺷﻳﺭ‬‫ﺍﻟﻰ‬‫ﺍﻟﻌﻧﺻﺭ‬‫ﺍﻟﻣﺭﺍﺩ‬‫ﺗﻛﺭﺍﺭﻩ‬‫ﻣﺛﻝ‬،‫ﺍﻟﺻﻭﺭ‬ ‫ﻭﺍﻟﻔﻳﺩﻳﻭ‬‫ﺃﻭ‬‫ﺣﺗﻰ‬Canvas‫ﺁﺧﺭ‬_^* ‫ﺍﻝ‬repeat:‫ﻫﻲ‬‫ﺍﻟﺣﺎﻟﺔ‬،‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬‫ﻭﺗﻌﻧﻲ‬‫ﺗﻛﺭﺍﺭ‬‫ﺃﻓﻘﻲ‬‫ﻭﻋﺎﻣﻭﺩﻱ‬. ‫ﺍﻝ‬repeat-x:‫ﺗﻛﺭﺍﺭ‬‫ﺃﻓﻘﻲ‬‫ﻓﻘﻁ‬. ‫ﺍﻝ‬repeat-y:‫ﺗﺭﺍﺭ‬‫ﻋﺎﻣﻭﺩﻱ‬‫ﻓﻘﻁ‬. ‫ﺍﻝ‬no-repeat:‫ﻳﺗﻡ‬‫ﺭﺳﻡ‬‫ﺍﻟﻌﻧﺻﺭ‬‫ﺩﻭﻥ‬‫ﺗﻛﺭﺍﺭﻩ‬–‫ﻣﺭﺓ‬‫ﻭﺍﺣﺩﺓ‬‫ﻓﻘﻁ‬-
  81. 81. Image Fills ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬: *:‫ﻻ‬‫ﺗﻧﺳﻰ‬‫ﺃﻥ‬‫ﺗﺳﺗﺧﺩﻡ‬‫ﺍﻝ‬‫ﺍﻟﺻﻭﺭﺓ‬‫ﺑﻌﺩ‬‫ﺗﺣﻣﻳﻠﻬﺎ‬:P ‫ﻭﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﻣﺟﻣﻭﻋﺔ‬‫ﻣﻥ‬‫ﺍﻷﻣﺛﻠﺔ‬: ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬
  82. 82. Opacity ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬Canvas‫ﻳﻣﻛﻧﻙ‬‫ﺍﻟﺗﺣﻛﻡ‬‫ﻓﻲ‬‫ﻣﻘﺩﺍﺭ‬‫ﺍﻟﺷﻔﺎﻓﻳﺔ‬‫ﻷﻱ‬‫ﺭﺳﻡ‬ ‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬Canvas،‫ﻭﻳﻛﻭﻥ‬‫ﺫﻟﻙ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻟﺧﺎﺻﻳﺔ‬ globalAlpha_^*،‫ﻭﺍﻟﺻﻳﻐﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬‫ﻫﻲ‬: ‫ﺍﻝ‬number:‫ﺗﺷﻳﺭ‬‫ﺍﻟﻰ‬‫ﻣﻘﺩﺍﺭ‬‫ﺍﻟﺷﻔﺎﻓﻳﺔ‬‫ﻟﻠﺻﻭﺭﺓ‬‫ﻭﺗﻛﻭﻥ‬‫ﻫﺫﻩ‬‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﺑﻳﻥ‬0.0)‫ﺷﻔﺎﻓﺔ‬‫ﺗﻣﺎﻣﺎ‬(‫ﻭﺍﻝ‬1.0)‫ﺍﻟﻘﻳﻣﺔ‬‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬–‫ﺑﺩﻭﻥ‬ ‫ﺷﻔﺎﻓﻳﺔ‬(..‫ﻭﺍﻵﻥ‬‫ﻟﻧﺷﺎﻫﺩ‬‫ﻣﺛﺎﻻ‬^_*
  83. 83. Opacity ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﺛﺎﻝ‬: ‫ﻻﺣﻅ‬‫ﻫﻧﺎ‬‫ﺃﻥ‬‫ﻛﻝ‬‫ﻣﺭﺑﻊ‬‫ﺗﺧﺗﻠﻑ‬‫ﺩﺭﺟﺔ‬،‫ﺷﻔﺎﻓﻳﺗﻪ‬‫ﺑﺣﻳﺙ‬‫ﺗﻘﻝ‬‫ﺷﻔﺎﻓﻳﺔ‬ ‫ﺍﻟﻣﺭﺑﻊ‬‫ﻛﻠﻣﺎ‬‫ﺇﻗﺗﺭﺑﻧﺎ‬‫ﻣﻥ‬‫ﺍﻟﺻﻔﺭ‬_^* ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬
  84. 84. Transforms ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com ‫ﻣﻌﻅﻡ‬‫ﻣﻁﻭﺭﻳﻥ‬‫ﺍﻟﻭﻳﺏ‬‫ﻋﻣﻠﻭﺍ‬‫ﺃﻭ‬‫ﺷﺎﻫﺩﻭﺍ‬‫ﺳﺎﺑﻘﺎ‬‫ﻋﻠﻰ‬‫ﺍﻝ‬CSS3، ‫ﻭﺷﺎﻫﺩﻭﺍ‬‫ﺍﻟﺧﺻﺎﺋﺹ‬‫ﺍﻟﺗﻲ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﻭﺟﻭﺩ‬‫ﺍﻝ‬ Transforms،‫ﻭﻫﻧﺎ‬‫ﺑﻧﻔﺱ‬‫ﺍﻟﻣﻔﻬﻭﻡ‬–‫ﺗﻘﺭﻳﺑﺎ‬–‫ﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻝ‬ ‫ﺍﻝ‬Transforms‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬Canvas،‫ﻭﻳﻛﻭﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﻷﻱ‬‫ﺧﺎﺻﻳﺔ‬ ‫ﺧﺎﺻﺔ‬‫ﺑﻬﺎ‬2D_^*،‫ﻭﻟﻣﻥ‬‫ﻻ‬‫ﻳﻌﺭﻑ‬‫ﻋﻥ‬‫ﺍﻝ‬Transforms‫ﻓﻬﻲ‬ ‫ﺧﺎﺻﻳﺔ‬‫ﺗﺗﻳﺢ‬‫ﻟﻙ‬‫ﻋﻣﻝ‬‫ﻧﻘﻝ‬‫ﻟﻌﻧﺻﺭ‬‫ﻣﺎ‬‫ﻣﻥ‬‫ﻣﻭﻗﻊ‬‫ﺍﻟﻰ‬،‫ﺁﺧﺭ‬‫ﺗﺣﺭﻳﻙ‬ ‫ﺍﻟﻌﻧﺻﺭ‬‫ﻭﺗﻛﺑﻳﺭ‬‫ﺍﻟﻌﻧﺻﺭ‬...‫ﺍﻟﺦ‬ ‫ﻭﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﻭﺍﻝ‬‫ﺃﺛﻧﺎء‬‫ﺍﻟﻌﻣﻝ‬‫ﻋﻠﻰ‬‫ﺍﻝ‬Transforms ‫ﻭﻫﻲ‬:
  85. 85. Transforms ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com (1translate():‫ﺗﺳﺗﺧﺩﻡ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬Canvas‫ﻟﺗﺣﺩﻳﺩ‬ ‫ﻧﻘﻁﺔ‬‫ﺇﻧﻁﻼﻕ‬‫ﻟﺑﺩء‬‫ﺍﻟﺭﺳﻡ‬)0,0(‫ﻓﻲ‬‫ﺍﻟﻧﻘﻁﺔ‬‫ﺍﻟﺗﻲ‬‫ﻳﺗﻡ‬‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﺩﺍﺧﻝ‬ ‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﻣﺛﻝ‬c.translate(50,50);‫ﻭﻫﻧﺎ‬‫ﺗﻌﻧﻲ‬‫ﺇﻧﻁﻠﻖ‬‫ﺍﻟﻰ‬ ‫ﺍﻟﻧﻘﻁﺔ‬50 , 50‫ﻭﺍﺟﻌﻠﻬﺎ‬‫ﻧﻘﻁﺔ‬‫ﺍﻹﻧﻁﻼﻕ‬‫ﻟﻠﺭﺳﻣﺔ‬‫ﺍﻟﺗﻲ‬‫ﺳﺗﺄﺗﻲ‬‫ﺑﻌﺩ‬ ‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬... ‫ﻣﻼﺣﻅﺔ‬:‫ﺍﺫﺍ‬‫ﻛﺎﻥ‬‫ﺍﻟﻌﻧﺻﺭ‬‫ﺍﻟﺫﻱ‬‫ﺳﻳﺗﻡ‬‫ﺭﺳﻣﻪ‬‫ﻳﺣﺗﻭﻱ‬‫ﻋﻠﻰ‬‫ﺇﺯﺍﺣﺔ‬ ‫ﻣﻌﻳﻧﺔ‬‫ﻭﻟﻧﻔﺭﺽ‬‫ﺃﻧﻬﺎ‬10‫ﺑﻛﺳﻝ‬‫ﻋﻠﻰ‬‫ﺍﻟﻣﺣﻭﺭ‬‫ﺱ‬‫ﻭﺍﻝ‬،‫ﺹ‬‫ﻓﺈﻧﻬﺎ‬ ‫ﺗﺿﺎﻑ‬‫ﺍﻟﻰ‬‫ﻧﻘﻁﺔ‬‫ﺇﻧﻁﻠﻖ‬‫ﺍﻟﺭﺳﻡ‬‫ﻓﻳﺻﺑﺢ‬‫ﻧﻘﻁﺔ‬‫ﺇﻧﻁﻼﻕ‬‫ﺍﻟﺭﺳﻡ‬‫ﻫﻲ‬ 50+10=60 ‫ﻭﺍﻵﻥ‬‫ﻟﻧﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬:
  86. 86. Transforms ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  87. 87. Transforms (2rotate():‫ﺗﺳﺗﺧﺩﻡ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﻟﺗﺩﻭﻳﺭ‬‫ﺍﻟﺭﺳﻣﺔ‬‫ﺑﻣﻘﺩﺍﺭ‬‫ﺯﺍﻭﻳﺔ‬‫ﻧﻘﻭﻡ‬ ‫ﺑﺗﺣﺩﻳﺩﻫﺎ‬،‫ﺑﺎﻟﺩﺭﺟﺎﺕ‬‫ﻭﻳﻛﻭﻥ‬‫ﺍﻟﺗﺩﻭﻳﺭ‬‫ﺑﺎﻝ‬Canvas‫ﻣﻥ‬‫ﺧﻼﻝ‬ ‫ﻫﺫﻩ‬‫ﺍﻟﻣﻌﺎﺩﻟﺔ‬degrees*Math.PI/180.‫ﺑﺣﻳﺙ‬‫ﺗﻣﺛﻝ‬‫ﺍﻝ‬ degrees‫ﺍﻟﺯﺍﻭﻳﺔ‬،‫ﺍﻟﻣﻁﻠﻭﺑﺔ‬‫ﻭﻣﻥ‬‫ﺛﻡ‬‫ﻧﺿﺭﺑﻬﺎ‬‫ﺏ‬‫ﺍﻟﺛﺎﺑﺕ‬)‫ﺑﺎﻱ‬– ‫ﻭﻫﻭ‬‫ﻳﺷﻳﺭ‬‫ﺍﻟﻰ‬‫ﺍﻟﻧﺳﺑﺔ‬‫ﺑﻳﻥ‬‫ﻣﺣﻳﻁ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬‫ﻭﻗﻁﺭﻫﺎ‬(،‫ﻭﺑﻣﻌﻧﻰ‬‫ﺁﺧﺭ‬ ‫ﺗﺧﻳﻝ‬‫ﺃﻧﻙ‬‫ﺗﺭﺳﻡ‬‫ﺩﺍﺋﺭﺓ‬‫ﻭﺑﺩﺍﺧﻠﻬﺎ‬‫ﺭﺳﻣﺔ‬،‫ﻣﻌﻳﻧﺔ‬‫ﻭﻣﻥ‬‫ﺛﻡ‬‫ﻧﻘﻭﻡ‬‫ﺑﺗﺣﺭﻙ‬ ‫ﻫﺫﻩ‬‫ﺍﻟﺭﺳﻣﺔ‬‫ﺩﺍﺧﻝ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬...‫ﻭﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬: ‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com
  88. 88. ‫ﺩﻋﺎء‬

×