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

��﷽
‫ﺩﻭﺭﺓ‬Canvas–‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺃﻧﻳﺱ‬ ‫ﺗﻘﺩﻳﻡ‬2nees.com

‫ﻣﺭﻓﻭﻉ‬ ‫ﺣﺩﻳﺙ‬

‫ﺍﻟﻔﻬﺭﺱ‬
‫ﺍﻟﻣﻘﺩﻣﺔ‬
‫ﺍﻝ‬ ‫ﻫﻭ‬ ‫ﻣﺎ‬Canvas‫؟‬
‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬ ‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬SVG, CSS, DOM‫؟‬
‫ﻟﻝ‬ ‫ﺍﻟﺩﺍﻋﻣﺔ‬ ‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬Canvas
‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing(
Making Charts
Image Fills
Opacity
Transforms
Clip
Events
requestAnimationFrameAnimating with
‫ﺍﻟﺧﺎﺗﻣﺔ‬
‫ﺣﻣﻳﺩ‬ ‫ﺃﺑﻭ‬ ‫ﺣﻛﻣﺕ‬ ‫ﺃﻧﻳﺱ‬-‫ﻣﺟﺎﻧﻳﺔ‬ ‫ﺩﻭﺭﺓ‬-aneeshikmat@2nees.com

‫ﺍﻟﻣﻘﺩﻣﺔ‬
‫ﺃﻧﻔﺳﻧﺎ‬ ‫ﺷﺭﻭﺭ‬ ‫ﻣﻥ‬ �‫ﺑﺎ‬ ‫ﻭﻧﻌﻭﺫ‬ ،‫ﻭﻧﺳﺗﻐﻔﺭﻩ‬ ‫ﻭﻧﺳﺗﻌﻳﻧﻪ‬ ‫ﻧﺣﻣﺩﻩ‬ ،� ‫ﺍﻟﺣﻣﺩ‬ ّ‫ﺇﻥ‬
‫ﻫﺎﺩﻱ‬ ‫ﻓﻼ‬ ‫ﻳﺿﻠﻝ‬ ‫ﻭﻣﻥ‬ ،‫ﻟﻪ‬ ‫ﻣﺿﻝ‬ ‫ﻓﻼ‬ ‫ﷲ‬ ‫ﻳﻬﺩﻩ‬ ‫ﻣﻥ‬ ،‫ﺃﻋﻣﺎﻟﻧﺎ‬ ‫ﺳﻳﺋﺎﺕ‬ ‫ﻭﻣﻥ‬
‫ﻋﺑﺩﻩ‬ ً‫ﺍ‬‫ﷴ‬ ‫ﺃﻥ‬ ‫ﻭﺃﺷﻬﺩ‬ ،‫ﻟﻪ‬ ‫ﺷﺭﻳﻙ‬ ‫ﻻ‬ ‫ﻭﺣﺩﻩ‬ ‫ﷲ‬ ‫ﺇﻻ‬ ‫ﺇﻟﻪ‬ ‫ﻻ‬ ‫ﺃﻥ‬ ‫ﻭﺃﺷﻬﺩ‬ ،‫ﻟﻪ‬
‫ﻭﺻﺣﺑﻪ‬ ‫ﺁﻟﻪ‬ ‫ﻭﻋﻠﻰ‬ ‫ﻋﻠﻳﻪ‬ ‫ﻭﺳﻼﻣﻪ‬ ‫ﷲ‬ ‫ﺻﻠﻭﺍﺕ‬ ،‫ﻭﺭﺳﻭﻟﻪ‬.‫ﺑﻌﺩ‬ ‫ﺃﻣﺎ‬..
‫ﺗﺗﺣﺩﺙ‬ ‫ﺟﺩﻳﺩﺓ‬ ‫ﺩﻭﺭﻩ‬ ‫ﻓﻲ‬ ،‫ﻭﻛﺭﻣﻪ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﻔﺿﻝ‬ ‫ﻣﺟﺩﺩﺍ‬ ‫ﻟﻛﻡ‬ ‫ﻧﻌﻭﺩ‬ ‫ﻓﺈﻧﻧﺎ‬
‫ﺍﻝ‬ ‫ﻋﻥ‬Canvas‫ﺍﻝ‬ ‫ﻅﻬﻭﺭ‬ ‫ﻣﻧﺫ‬ ‫ﻣﺳﺗﺧﺩﻣﺎ‬ ‫ﻭﺃﺻﺑﺢ‬ ،‫ﺟﻠﻳﺎ‬ ‫ﻅﻬﺭ‬ ‫ﺍﻟﺫﻱ‬
HTML5‫ﺗﺻﻣﻳﻡ‬ ‫ﺣﻳﺏ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻭﻳﺏ‬ ‫ﻋﺎﻟﻡ‬ ‫ﻓﻲ‬ ‫ﻛﺑﻳﺭ‬ ‫ﺃﺛﺭ‬ ‫ﻟﻅﻬﻭﺭﻩ‬ ‫ﻭﻛﺎﻥ‬ ،
‫ﺍﻝ‬ ‫ﻭﺗﻁﻭﻳﺭ‬Animation‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﺭﺳﻡ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬ ،‫ﺍﻷﻟﻌﺎﺏ‬ ‫ﻭﺑﻧﺎء‬
‫ﺍﻟﺑﻳﺎﻧﻳﺔ‬ ‫ﻭﺍﻟﻣﺧﻁﻁﺎﺕ‬...‫ﺑﻁﺭﻳﻘﺔ‬ ‫ﺍﻟﻣﻭﺍﺿﻳﻊ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻟﻰ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﻫﻧﺎ‬ ‫ﻭﺳﻧﻧﺗﻁﺭﻕ‬
‫ﻭﺍﻵﻥ‬ ،‫ﻭﺍﻹﺛﺎﺭﺓ‬ ‫ﺍﻟﺗﺣﺩﻱ‬ ‫ﻳﻣﻸﻩ‬ ‫ﺟﺩﻳﺩ‬ ‫ﻁﺭﻳﻖ‬ ‫ﻋﻠﻰ‬ ‫ﻭﺇﻳﺎﻛﻡ‬ ‫ﺗﺿﻌﻧﺎ‬ ‫ﻣﺧﺗﺻﺭﺓ‬ ‫ﺳﻬﻠﺔ‬
‫ﺍﻟﻣﺗﻭﺍﺿﻌﺔ‬ ‫ﺍﻟﺩﻭﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﺻﻔﺣﺎﺕ‬ ‫ﺍﻟﻰ‬ ‫ﻟﻧﻧﻁﻠﻖ‬ ‫ﺑﻧﺎ‬ ‫ﻫﻳﺎ‬...

‫ﺍﻟﻣﻘﺩﻣﺔ‬
‫ﺍﻟﺩﻭﺭﺓ‬ ‫ﻣﺗﻁﻠﺑﺎﺕ‬:
(1HTML
(2JS)‫ﺟﺩﺍ‬ ‫ﻣﻬﻡ‬(
(3CSS
(4HTML5)‫ﺍﻟﺯﺍﻣﻳﺔ‬ ‫ﻭﻟﻳﺳﺕ‬ ‫ﻋﺎﻣﺔ‬ ‫ﻣﻌﺭﻓﺔ‬(
‫ﻣﻼﺣﻅﺎﺕ‬:
•‫ﺍﻟﺗﻌﻠﻡ‬ ‫ﻓﻲ‬ ‫ﻣﻬﻡ‬ ‫ﻭﻫﺫﺍ‬ ،‫ﺑﻳﺩﻳﻙ‬ ‫ﻭﻛﺗﺎﺑﺗﻬﺎ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺟﻣﻳﻊ‬ ‫ﺗﻁﺑﻳﻖ‬ ‫ﻋﻠﻳﻙ‬ ‫ﻳﺟﺏ‬
‫ﺍﻟﺩﻭﺭﺍﺕ‬ ‫ﻫﺫﻩ‬ ‫ﻟﻣﺛﻝ‬.
•‫ﻣﻧﺎ‬ ‫ﻳﺗﻘﺑﻝ‬ ‫ﺃﻥ‬ ‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﻧﺳﺄﻝ‬ ،‫ﻣﺟﺎﻧﻲ‬ ‫ﺑﺷﻛﻝ‬ ‫ﻟﻠﺟﻣﻳﻊ‬ ‫ﻣﻘﺩﻡ‬ ‫ﺍﻟﻌﻣﻝ‬ ‫ﻫﺫﺍ‬
‫ﻳﻧﺗﺞ‬ ‫ﻗﺩ‬ ‫ﺷﺭﻋﻪ‬ ‫ﻳﺧﺎﻟﻑ‬ ‫ﻓﻌﻝ‬ ‫ﺃﻱ‬ ‫ﻣﻥ‬ ‫ﷲ‬ ‫ﺍﻟﻰ‬ ‫ﺃﺑﺭﺉ‬ ‫ﻟﺫﻟﻙ‬ ،‫ﺃﻋﻣﺎﻟﻧﺎ‬ ‫ﻭﻣﻧﻛﻡ‬
‫ﺍﻟﺣﺭﻭﻑ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻌﻠﻣﻛﻡ‬ ‫ﺟﺭﺍء‬ ‫ﻣﻥ‬.‫ﻓﺎﺷﻬﺩ‬ ‫ﺍﻟﻠﻬﻡ‬ ،‫ﺑﻠﻐﺕ‬ ‫ﻗﺩ‬ ‫ﺍﻟﻠﻬﻡ‬.

‫ﺍﻝ‬ ‫ﻫﻭ‬ ‫ﻣﺎ‬Canvas‫؟‬
‫ﺍﻝ‬ ‫ﻣﻔﻬﻭﻡ‬ ‫ﺑﺳﺭﺩ‬ ‫ﺳﻧﻘﻭﻡ‬Canvas‫ﺍﻟﻰ‬ ‫ﺍﻷﻋﻡ‬ ‫ﻣﻥ‬ ‫ﻧﻘﺎﻁ‬ ‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬
‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺑﺈﺫﻥ‬ ‫ﻟﻪ‬ ‫ﻭﺍﻟﺧﺎﺹ‬ ‫ﺍﻟﻌﺎﻡ‬ ‫ﺍﻟﻣﻔﻬﻭﻡ‬ ‫ﺍﻟﻰ‬ ‫ﻧﺻﻝ‬ ‫ﺣﺗﻰ‬ ‫ﺍﻷﺧﺹ‬^_^
‫ﺍﻝ‬Canvas‫ﻫﻭ‬API‫ﺍﻝ‬ ‫ﺍﻟﻰ‬ ‫ﺣﺩﻳﺛﺎ‬ ‫ﺃﺿﻳﻑ‬HTML‫ﺩﻋﻣﻪ‬ ‫ﻭﺗﻡ‬
‫ﺍﻟﺭﺋﻳﺳﻳﺔ‬ ‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬ ‫ﺟﻝ‬ ‫ﻣﻥ‬)IE9+(‫ﺭﺳﻡ‬ ‫ﻛﻭﺳﻳﻠﺔ‬ ‫ﻭﻳﺳﺗﺧﺩﻡ‬
‫ﻋﻠﻰ‬ ‫ﻣﺑﺎﺷﺭﺓ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺍﻹﺿﺎﻓﺔ‬ ‫ﻫﺫﻩ‬ ‫ﻟﻧﺎ‬ ‫ﺗﺗﻳﺢ‬ ‫ﻳﺣﻳﺙ‬ ،‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻳﺔ‬
‫ﺇﺿﺎﻓﺔ‬ ‫ﻷﻱ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﺑﺩﻭﻥ‬ ‫ﺍﻟﻣﺗﺻﻔﺢ‬)plug-in(‫ﺃﻭ‬JAVA‫ﻛﻣﺎ‬ ،
‫ﺍﻟﻠﻭﺣﻲ‬ ‫ﺃﻭ‬ ‫ﺍﻟﻣﻛﺗﺑﻲ‬ ‫ﺍﻟﺟﻬﺎﺯ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻌﻣﻝ‬ ‫ﺍﻹﺿﺎﻓﺔ‬ ‫ﻟﻬﺫﻩ‬ ‫ﻳﻣﻛﻥ‬...
‫ﺍﻝ‬Canvas‫ﻫﻭ‬API‫ﺍﻟﺧﻁﻭﻁ‬ ‫ﻟﺭﺳﻡ‬ ‫ﺍﻟﻣﺗﺻﻔﺢ‬ ‫ﻳﺳﺗﺧﺩﻣﻪ‬
‫ﻭﺍﻟﻧﺻﻭﺹ‬ ‫ﻭﺍﻟﺻﻭﺭ‬ ‫ﻭﺍﻷﺷﻛﺎﻝ‬..‫ﻣﻥ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻣﻭﻗﻊ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻭﻳﺗﻡ‬ ،‫ﺍﻟﺦ‬
‫ﺑﻳﺎﻧﺎﺕ‬ ‫ﻣﻥ‬ ‫ﻧﺣﻥ‬ ‫ﻧﻘﺩﻣﻪ‬ ‫ﻣﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺑﻧﺎﺋﺎ‬ ‫ﺍﻟﻣﺗﺻﻔﺢ‬ ‫ﺧﻼﻝ‬.

‫ﺍﻝ‬Canvas‫ﻫﻭ‬HTML5 tag‫ﺍﻟﺭﺳﻭﻣﺎﺕ‬ ‫ﻟﺭﺳﻡ‬ ‫ﻳﺳﺗﺧﺩﻡ‬
‫ﺍﻟﺳﻛﺭﺑﺕ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻣﺑﺎﺷﺭ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺍﻟﻣﺧﺗﻠﻔﺔ‬)‫ﺳﻛﺭﺑﺕ‬ ‫ﺍﻟﺟﺎﻓﺎ‬ ‫ﻋﺎﺩﺓ‬(،
،‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻟﻣﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﻘﻠﻡ‬ ‫ﺃﻭ‬ ‫ﺍﻟﺭﻳﺷﺔ‬ ‫ﻫﻭ‬ ‫ﺍﻟﻣﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﺳﻛﺭﺑﺕ‬ ‫ﻭﻳﻛﻭﻥ‬
‫ﺍﻝ‬ ‫ﻭﻳﻛﻭﻥ‬Canvas tag‫ﺍﻟﻠﻭﺣﺔ‬ ‫ﻓﻘﻁ‬)‫ﺍﻹﻧﺎء‬(،‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﺧﺎﺹ‬
،‫ﻧﻔﺳﻪ‬ ‫ﺗﻠﻘﺎء‬ ‫ﻣﻥ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻋﻠﻰ‬ ‫ﻗﺩﺭﺓ‬ ‫ﺃﻭ‬ ‫ﻣﻳﺯﺓ‬ ‫ﺃﻱ‬ ‫ﻟﻭﺣﺩﻩ‬ ‫ﻳﺣﺗﻭﻱ‬ ‫ﻭﻻ‬
‫ﺍﻝ‬ ‫ﻧﺳﺗﺧﺩﻡ‬ ‫ﺃﻧﻧﺎ‬ ‫ﺍﻟﻰ‬ ‫ﻧﺻﻝ‬ ‫ﻭﻫﻧﺎ‬Canvas‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﻛﺈﻧﺎء‬
‫ﺇﺿﺎﻓﺗﻬﺎ‬ ‫ﺗﻡ‬ ‫ﻣﺎ‬ ‫ﻫﻲ‬ ‫ﻫﺫﻩ‬ ‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻳﺔ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻭﺃﻭﺍﻣﺭ‬ ،‫ﺳﻛﺭﺑﺕ‬ ‫ﺍﻟﺟﺎﻓﺎ‬
‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻳﺗﻡ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺃﻥ‬ ‫ﻋﻠﻣﺎ‬ ،‫ﺍﻟﺭﺳﻡ‬ ‫ﻣﻥ‬ ‫ﻟﺗﻣﻛﻧﻧﺎ‬Pixels.

‫ﻣﻬﻣﺔ‬ ‫ﻣﻼﺣﻅﺔ‬:‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﺍﻷﺧﻳﺭ‬ ‫ﺍﻟﺗﻌﺭﻳﻑ‬ ‫ﻓﻲ‬ ‫ﺫﻛﺭﻧﺎ‬Canvas‫ﻳﻘﻭﻡ‬
‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺭﺳﻭﻣﺎﺕ‬ ‫ﺭﺳﻡ‬ ‫ﻋﻠﻰ‬Pixels)‫ﺍﻟﺿﻭﺋﻳﺔ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺃﻱ‬
‫ﻋﺭﺽ‬ ‫ﺷﺎﺷﺔ‬ ‫ﺃﻱ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻣﻭﺟﻭﺩﺓ‬(‫ﺗﻣﻠﻙ‬ ‫ﻻ‬ ‫ﺑﻬﺫﺍ‬ ‫ﻭﻫﻲ‬ ،Shapes‫ﺃﻭ‬
Vectors‫ﺗﻣﻠﻙ‬ ‫ﻭﻻ‬ ،object‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﺗﺣﻛﻡ‬ ‫ﺧﻼﻟﻪ‬ ‫ﻣﻥ‬ ‫ﻳﻣﻛﻧﻧﺎ‬
‫ﺍﻟﻧﺎﺗﺞ‬ ‫ﺍﻟﻧﻬﺎﺋﻲ‬)‫ﺃﻗﺻﺩ‬ ‫ﻭﻫﻧﺎ‬event handlers(‫ﺗﻡ‬ ‫ﺭﺳﻣﺔ‬ ‫ﻓﻘﻁ‬ ‫ﻫﻲ‬ ،
‫ﺑﺎﻟﺷﺎﺷﺔ‬ ‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻟﺿﻭﺋﻳﺔ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﻋﻠﻰ‬ ‫ﺭﺳﻣﻬﺎ‬.
)‫ﺍﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻁﺑﻌﺎ‬event handlers‫ﺃﺧﺫ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻋﻥ‬ ‫ﻳﺧﺗﻠﻑ‬
‫ﺑﻭﺟﻭﺩ‬ ‫ﺍﻹﻋﺗﺑﺎﺭ‬Animation‫ﻟﻝ‬canvas(
‫ﻳﻛﻭﻥ‬ ‫ﻟﻥ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺃﻥ‬ ‫ﻭﻻﺣﻅ‬Vectors‫ﻋﻣﻝ‬ ‫ﻋﻧﺩ‬ ‫ﺫﻟﻙ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺗﺣﻘﻖ‬ ‫ﻭﻳﻣﻛﻧﻙ‬
zoom‫ﺑﺈﻧﺷﺎﺋﻪ‬ ‫ﻗﻣﺕ‬ ‫ﻣﺛﻼ‬ ‫ﻟﻣﺭﺑﻊ‬..‫ﺗﺣﻛﻲ‬ ‫ﺭﺡ‬)‫ﺑﺑﻛﺳﻝ‬: (P

‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﺗﻡ‬ ‫ﻫﻝ‬Canvas‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻠﺭﺳﻡ‬
‫ﺍﻝ‬ ‫ﻋﻥ‬ ‫ﻣﺎﺫﺍ‬ ‫؟‬ ‫ﺍﻷﻭﻗﺎﺕ‬SVG, CSS, DOM‫؟‬
‫ﻋﻠﻰ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﻁﺭﻕ‬ ‫ﻋﺩﺓ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ،‫ﺍﻟﻣﻭﺍﻗﻊ‬ ‫ﺗﺻﻣﻳﻡ‬ ‫ﻣﺟﺎﻝ‬ ‫ﻓﻲ‬
‫ﺍﻝ‬ ‫ﻫﻲ‬ ‫ﺍﻟﻁﺭﻕ‬ ‫ﻫﺫﻩ‬ ،‫ﺍﻟﻣﺗﺻﻔﺢ‬CSS, DOM animation, Svg
‫ﺍﻝ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬canvas..
1(‫ﺍﻝ‬css:‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻙ‬css‫ﺭﺳﻡ‬ ‫ﻣﺛﻝ‬ ‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﺑﻌﺽ‬ ‫ﻟﺭﺳﻡ‬
‫ﻟﻌﻧﺎﺻﺭ‬ ‫ﺗﻧﺳﻳﻖ‬ ‫ﻋﻣﻠﻳﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻭﺍﻗﻊ‬ ‫ﻓﻲ‬ ‫ﻟﻛﻧﻬﺎ‬ ،‫ﻣﺎء‬ ‫ﻗﻁﺭﺓ‬DOM
‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﺑﻣﺎ‬ ،‫ﺁﺧﺭ‬ ‫ﺃﻣﺭ‬ ‫ﺍﻟﻰ‬ ‫ﻳﻘﻭﺩﻧﺎ‬ ‫ﻭﻫﺫﺍ‬ ،‫ﻟﺩﻱ‬ ‫ﻣﻭﺟﻭﺩﺓ‬Canvas
‫ﻟﻝ‬ ‫ﻳﻣﻛﻥ‬ ‫ﻓﻼ‬ ،‫ﺑﺎﻟﺑﻛﺳﻝ‬ ‫ﺭﺳﻡ‬ ‫ﻭﺳﻳﻠﺔ‬ ‫ﻋﻥ‬ ‫ﻋﺑﺎﺭﺓ‬CSS،‫ﺍﻟﻳﻪ‬ ‫ﺍﻟﻭﺻﻭﻝ‬
‫ﻟﻳﺱ‬ ‫ﻓﻬﻭ‬DOM)‫ﺍﻟﻣﺭﺳﻭﻡ‬ ‫ﻟﻠﻌﻧﺻﺭ‬(‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻙ‬ ‫ﻟﻛﻥ‬
border‫ﺃﻭ‬background‫ﺍﻝ‬ ‫ﻟﺫﺍﺕ‬Canvas..‫ﻣﺛﺎﻻ‬ ‫ﻟﻧﺷﺎﻫﺩ‬..

‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻣﺭﺳﻭﻣﺔ‬ ‫ﺍﻟﻘﻁﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﻻﺣﻅ‬
‫ﺍﻝ‬css...‫ﻋﻣﻠﻳﺔ‬ ‫ﻓﻌﻼ‬ ‫ﺃﻧﻬﺎ‬ ‫ﻭﻻﺣﻅ‬
‫ﻟﻠﻌﻧﺎﺻﺭ‬ ‫ﺗﻧﺳﻳﻖ‬^_^

2(‫ﺍﻝ‬SVG:‫ﻋﻥ‬ ‫ﻋﺑﺎﺭﺓ‬vector API‫ﻟﻛﻝ‬ ،‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﻟﺭﺳﻡ‬ ‫ﻳﺳﺗﺧﺩﻡ‬
‫ﺍﻝ‬ ‫ﻣﻧﻬﺎ‬ ‫ﺷﻛﻝ‬object‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻣﻥ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﻭﻫﺫﺍ‬ ،‫ﺑﻬﺎ‬ ‫ﺍﻟﺧﺎﺹ‬
event handler‫ﻟﻭ‬ ‫ﺫﻟﻙ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬ ،‫ﺍﻟﻣﺭﺳﻭﻣﺔ‬ ‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﻟﻬﺫﻩ‬
‫ﺑﻌﻣﻝ‬ ‫ﻗﻣﺕ‬zoom in‫ﺍﻷﺻﻠﻲ‬ ‫ﺑﺷﻛﻠﻪ‬ ‫ﻓﺳﻳﺑﻘﻰ‬ ‫ﺍﻟﻧﺎﺗﺞ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻋﻠﻰ‬
‫ﻏﺑﺎﺵ‬ ‫ﺩﻭﻥ‬)‫ﻭﻣﺗﺟﻬﺎﺕ‬ ‫ﺯﻭﺍﻳﺎ‬ ‫ﻋﻥ‬ ‫ﻧﺗﺣﺩﺙ‬ ‫ﻷﻧﻧﺎ‬(‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﻟﻛﻥ‬ ،
Canvas‫ﺑﻛﺳﻠﺔ‬ ‫ﻋﻣﻠﻳﺔ‬ ‫ﺳﺗﺣﺩﺙ‬)pixelated–‫ﻋﻠﻰ‬ ‫ﺗﺷﻭﻳﺵ‬
‫ﺍﻟﺿﻭﺋﻳﺔ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺷﻛﻝ‬-(‫ﺍﻟﺷﻛﻝ‬ ‫ﻟﻬﺫﺍ‬..
3(Dom Animation:‫ﺗﻌﺭﻳﻑ‬ ‫ﻋﻠﻰ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻘﻭﻡ‬object‫ﻟﻛﻝ‬
‫ﺗﺣﺭﻳﻙ‬ ‫ﺃﻭ‬ ‫ﺭﺳﻡ‬ ‫ﻣﻥ‬ ‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺗﻔﺎﻋﻝ‬ ‫ﻭﻳﺗﻡ‬ ،‫ﺍﻟﺷﺎﺷﺔ‬ ‫ﻓﻲ‬ ‫ﻋﻧﺻﺭ‬
‫ﺍﻝ‬ ‫ﻣﻊ‬ ‫ﺍﻟﺗﻌﺎﻣﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬css‫ﻭﺍﻝ‬js!!.....

‫ﺑﻪ؟‬ ‫ﺃﺗﺣﺩﺙ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﻛﻼﻡ‬ ‫ﻫﺫﺍ‬ ‫ﻣﺎ‬!
‫ﺍﻝ‬ ‫ﻧﺳﺗﺧﺩﻡ‬ ‫ﻫﻝ‬ ‫؟‬ ‫ﻳﻌﻧﻲ‬ ‫ﻣﺎﺫﺍ‬css‫ﺍﻝ‬ ‫ﺃﻡ‬SVG‫ﺍﻝ‬ ‫ﺃﻡ‬Dom
Animation‫ﺍﻝ‬ ‫ﺃﻡ‬Canvas‫؟؟؟‬
‫؟‬ ‫ﺻﺣﻳﺢ‬ ‫ﺍﻹﺳﺗﺧﺩﺍﻡ‬ ‫ﻫﺫﺍ‬ ‫ﻳﻛﻭﻥ‬ ‫ﻭﻣﺗﻰ‬ ‫ﻭﺃﻳﻥ‬!!
‫ﺃﻭﻻ‬:‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﺻﺩﻳﻘﻲ‬ ‫ﺗﻌﻠﻡ‬ ‫ﺃﻥ‬ ‫ﻳﺟﺏ‬Canvas‫ﻫﻭ‬Lowers Level
‫ﻟﻝ‬ ‫ﺑﺎﻟﻧﺳﺑﺔ‬SVG, CSS, DOM‫ﺃﻛﺑﺭ‬ ‫ﻗﺩﺭﺓ‬ ‫ﻳﻌﻁﻳﻙ‬ ‫ﻓﻬﻭ‬ ‫ﻭﻟﻬﺫﺍ‬ ،
‫ﺍﻟﻰ‬ ‫ﻳﺣﺗﺎﺝ‬ ‫ﺍﻟﻭﻗﺕ‬ ‫ﺑﺫﺍﺕ‬ ‫ﻟﻛﻧﻪ‬ ،‫ﺃﻗﻝ‬ ‫ﺫﺍﻛﺭﺓ‬ ‫ﻭﻳﺳﺗﺧﺩﻡ‬ ،‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﺗﺣﻛﻡ‬ ‫ﻋﻠﻰ‬
‫ﺍﻷﺧﺭﻯ‬ ‫ﺍﻟﻁﺭﻕ‬ ‫ﻣﻥ‬ ‫ﺃﻛﺑﺭ‬ ‫ﺑﺭﻣﺟﻳﺔ‬ ‫ﺷﻳﻔﺭﺓ‬^_^.

‫ﺛﺎﻧﻳﺎ‬:‫ﺍﻝ‬ ‫ﻧﺳﺗﺧﺩﻡ‬SVG‫ﻟﺩﻳﻧﺎ‬ ‫ﻳﺗﻭﻓﺭ‬ ‫ﻋﻧﺩﻣﺎ‬shape‫ﺟﻠﺑﻪ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺟﺎﻫﺯ‬
‫ﺍﻟﺧﺭﺍﺋﻁ‬ ‫ﺫﻟﻙ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺃﺷﻬﺭ‬ ‫ﻭﻣﻥ‬ ،‫ﺍﻟﻌﺭﺽ‬ ‫ﺷﺎﺷﺔ‬ ‫ﺍﻟﻰ‬maps،
‫ﺑﺭﻧﺎﻣﺞ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬ ‫ﺍﻟﺧﺭﻳﻁﺔ‬ ‫ﺭﺳﻡ‬ ‫ﻓﻳﺗﻡ‬Adobe Illustrator‫ﺛﻡ‬ ‫ﻭﻣﻥ‬
‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺗﺻﺩﻳﺭﻩ‬ ‫ﻳﺗﻡ‬SVG‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻛﺛﻳﺭ‬ ‫ﻭﻏﻳﺭﻫﺎ‬..

‫ﺛﺎﻟﺛﺎ‬:‫ﺍﻝ‬ ‫ﻧﺳﺗﺧﺩﻡ‬css‫ﺃﻭ‬DOM‫ﻛﺑﻳﺭﺓ‬ ‫ﻣﺳﺎﺣﺔ‬ ‫ﻟﺩﻳﻧﺎ‬ ‫ﻳﺗﻭﺍﺟﺩ‬ ‫ﻋﻧﺩﻣﺎ‬
‫ﻋﻧﺩ‬ ‫ﺃﻭ‬ ،‫ﺍﻟﻣﺳﺎﺣﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻫﺫﺍ‬ ‫ﻭﺗﺣﺭﻳﻙ‬ ‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﻭﻧﺭﻏﺏ‬ ‫ﺛﺎﺑﺗﺔ‬
‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬ ‫ﺭﻏﺑﺗﻧﺎ‬3D transforms‫ﺍﻷﻛﺛﺭ‬ ‫ﺍﻟﻧﻭﻉ‬ ‫ﻫﺫﺍ‬ ‫ﻳﻛﻭﻥ‬ ‫ﻭﻗﺩ‬ ،
‫ﺭﺳﻡ‬ ‫ﻳﺗﻡ‬ ‫ﺑﺣﻳﺙ‬ ،‫ﻋﺎﻡ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺍﻟﻣﻁﻭﺭﻳﻥ‬ ‫ﻷﻏﻠﺏ‬ ‫ﻭﺍﺳﺗﺧﺩﺍﻣﺎ‬ ‫ﺷﻳﻭﻋﺎ‬
‫ﺍﻝ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬ ‫ﻭﻏﻳﺭﻫﺎ‬ ‫ﺍﻟﺗﺄﺛﻳﺭﺍﺕ‬CSS‫ﺍﻝ‬ ‫ﺑﻌﻣﻝ‬ ‫ﻳﻘﻭﻡ‬ ‫ﻭﺍﻟﻛﺛﻳﺭ‬
Animation‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬DOM‫ﺍﻝ‬ ‫ﺩﺧﻭﻝ‬ ‫ﻣﻊ‬ ‫ﺧﺻﻭﺻﺎ‬ ،
Parallax Scrolling‫ﺍﻝ‬ ‫ﺩﺧﻭﻝ‬ ‫ﻭﺑﻌﺩ‬ ،‫ﺍﻵﻥ‬ ‫ﻟﻛﻥ‬ ،HTML5‫ﻭﺗﻁﻭﺭ‬ ،
‫ﺍﻷﻓﺿﻝ‬ ‫ﺍﻷﺳﻠﻭﺏ‬ ‫ﻋﻥ‬ ‫ﻳﺑﺣﺛﻭﻥ‬ ‫ﺍﻟﻧﺷﻁﻳﻥ‬ ‫ﺍﻟﻣﻁﻭﺭﻳﻥ‬ ‫ﺃﺻﺑﺢ‬ ،‫ﺍﻟﻌﺭﺽ‬ ‫ﺗﻘﻧﻳﺎﺕ‬
‫ﺑﻳﻥ‬ ‫ﺍﻹﺧﺗﻼﻓﺎﺕ‬ ‫ﻋﻥ‬ ‫ﻋﺎﻡ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺑﻌﺽ‬ ‫ﺑﺗﻔﺻﻳﻝ‬ ‫ﻗﻣﻧﺎ‬ ‫ﻭﻟﻬﺫﺍ‬ ،‫ﺟﺯﺋﻳﺔ‬ ‫ﻟﻛﻝ‬
‫ﻭﺍﻟﺭﺳﻡ‬ ‫ﺍﻟﺗﺄﺛﻳﺭ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻁﺭﻕ‬ ‫ﻫﺫﻩ‬...

‫ﻟﻝ‬ ‫ﺍﻟﺩﺍﻋﻣﺔ‬ ‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬Canvas
‫ﺍﻟﺭﺋﻳﺳﻳﺔ‬ ‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬ ‫ﻣﻌﻅﻡ‬ ‫ﺃﻥ‬ ‫ﻫﻧﺎ‬ ‫ﻻﺣﻅ‬
‫ﺍﻝ‬ ‫ﺗﺩﻋﻡ‬ ‫ﺍﻟﺗﺷﻐﻳﻝ‬ ‫ﻭﺃﻧﻅﻣﺔ‬Canvas
،‫ﻟﻠﺭﺳﻡ‬ ‫ﻭﻣﺩﻋﻭﻣﺔ‬ ‫ﺟﻳﺩﺓ‬ ‫ﻭﺳﻳﻠﺔ‬ ‫ﻓﻬﻭ‬ ‫ﻭﻟﺫﻟﻙ‬
‫ﺃﺟﻬﺯﺓ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻘﺗﺻﺭ‬ ‫ﻻ‬ ‫ﺍﻟﺩﻋﻡ‬ ‫ﻫﺫﺍ‬ ‫ﺃﻥ‬ ‫ﻛﻣﺎ‬
‫ﻛﺫﻟﻙ‬ ‫ﻳﺷﻣﻝ‬ ‫ﺑﻝ‬ ،‫ﺍﻟﻼﺑﺗﻭﺏ‬ ‫ﺃﻭ‬ ‫ﺍﻟﻣﻛﺗﺏ‬ ‫ﺳﻁﺢ‬
‫ﺍﻟﺫﻛﻳﺔ‬ ‫ﺍﻟﻬﻭﺍﺗﻑ‬..._^*

‫ﺍﻟﻔﺎﺗﺣﺔ‬ ‫ﺳﻭﺭﺓ‬–‫ﺍﻟﻛﺭﻳﻡ‬ ‫ﺍﻟﻘﺭﺁﻥ‬–‫ﺍﻟﻣﺯﻳﺩ‬‫ﻫﻧﺎ‬ ‫ﻣﻥ‬

‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻭﻣﺎﺕ‬)Simples Drawing(
‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻋﻥ‬ ‫ﺳﺎﺑﻘﺎ‬ ‫ﺗﺣﺩﺛﻧﺎ‬Canvas‫ﻣﻥ‬ ‫ﻭﻳﻣﻛﻧﻧﺎ‬ ،‫ﺳﻬﻠﺔ‬ ‫ﺭﺳﻡ‬ ‫ﻭﺳﻳﻠﺔ‬
‫ﻗﺩ‬ ‫ﺳﺎﺑﻘﺎ‬ ‫ﻛﻧﺕ‬ ‫ﻭﺇﻥ‬ ،‫ﺳﻬﻭﻟﺔ‬ ‫ﺑﻛﻝ‬ ‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻳﺔ‬ ‫ﺍﻟﺭﺳﻭﻣﺎﺕ‬ ‫ﺇﻧﺷﺎء‬ ‫ﺧﻼﻟﻬﺎ‬
‫ﺍﻟﺟﺎﻓﺎ‬ ‫ﺃﻭ‬ ‫ﺍﻟﻔﻼﺵ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻲ‬ ‫ﺷﻛﻝ‬ ‫ﺃﻱ‬ ‫ﺑﺭﺳﻡ‬ ‫ﻗﻣﺕ‬2D،
‫ﺃﻳﺿﺎ‬ ‫ﻫﻧﺎ‬ ‫ﺇﻧﺷﺎﺋﻪ‬ ‫ﺗﺳﺗﻁﻳﻊ‬ ‫ﺃﻥ‬ ‫ﺑﻙ‬ ‫ﻓﻳﻔﺗﺭﺽ‬^_^‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻓﻳﻣﻛﻧﻙ‬ ،
Fill and stroke color‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬ ،‫ﺍﻷﺷﻛﺎﻝ‬ ‫ﺭﺳﻡ‬ ‫ﺛﻡ‬ ‫ﻭﻣﻥ‬ ،
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺗﻧﻔﻳﺫﻫﺎ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺑﺳﻳﻁﺔ‬ ‫ﺭﺳﻣﺎﺕ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻣﻥ‬ ‫ﻣﺟﻣﻭﻋﺔ‬
Canvas‫ﻟﻣﺎ‬ ‫ﺍﻟﻌﻣﻠﻳﺔ‬ ‫ﻭﺍﻟﺗﺟﺭﺑﺔ‬ ‫ﻭﺗﻁﺑﻳﻘﻬﺎ‬ ‫ﺑﺎﻷﻣﺛﻠﺔ‬ ‫ﺍﻹﻫﺗﻣﺎﻡ‬ ‫ﻣﻧﻙ‬ ‫ﺃﺭﺟﻭ‬ ‫ﻛﻣﺎ‬ ،
‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ،‫ﺍﻟﺧﺻﺎﺋﺹ‬ ‫ﻟﺷﺭﺡ‬ ‫ﺍﻟﺗﻁﺭﻕ‬ ‫ﻫﻧﺎ‬ ‫ﻭﺳﻳﺗﻡ‬ ،‫ﺫﻛﺭﻩ‬ ‫ﻳﺗﻡ‬
‫ﺗﻠﻳﻪ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻓﻲ‬ ‫ﺗﻌﺎﺩ‬ ‫ﻟﻥ‬ ،‫ﻣﺛﺎﻝ‬ ‫ﻛﻝ‬ ‫ﻓﻲ‬ ‫ﺷﺭﺣﻬﺎ‬_^... *‫ﻟﻧﻧﻁﻠﻖ‬ ‫ﻭﺍﻵﻥ‬
‫ﷲ‬ ‫ﺑﺭﻛﺔ‬ ‫ﻋﻠﻰ‬^_^

‫ﻣﺛﺎﻝ‬1:‫ﺑﺭﺳﻡ‬ ‫ﺍﻵﻥ‬ ‫ﺳﻧﻘﻭﻡ‬rectangle‫ﻋﻣﻠﻳﺔ‬ ‫ﺳﺗﺗﻡ‬ ‫ﻛﻳﻑ‬ ‫ﻭﻟﻧﺷﺎﻫﺩ‬ ،
‫ﻫﻧﺎ‬ ‫ﺍﻟﺭﺳﻡ‬:
‫ﻣﻼﺣﻅﺔ‬:getContext():‫ﺍﻝ‬ ‫ﻹﺭﺟﺎﻉ‬ ‫ﺗﺳﺗﺧﺩﻡ‬ ‫ﺩﺍﻟﺔ‬ ‫ﻫﻲ‬Object
‫ﺍﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﻭﺍﻟﺩﻭﺍﻝ‬ ‫ﺍﻟﺧﺻﺎﺋﺹ‬ ‫ﻳﺩﻋﻡ‬ ‫ﺍﻟﺫﻱ‬Canvas‫ﻫﺫﺍ‬ ‫ﻭﻳﺗﻡ‬ ،
‫ﺍﻝ‬ ‫ﻋﻠﻰ‬ ‫ﻧﺣﺻﻝ‬ ‫ﻋﻧﺩﻣﺎ‬Canvas‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻣﺭﺍﺩ‬Selector
‫ﺍﻝ‬ ‫ﻣﺛﻝ‬ID‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﺍﺳﺗﺧﺩﺍﻡ‬ ‫ﺛﻡ‬ ‫ﻭﻣﻥ‬ ،getContext().
‫ﻣﻼﺣﻅﺔ‬2:getContext(“2D”)‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﺩﻭﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻟﺗﺣﺩﻳﺩ‬ ‫ﺗﺳﺗﺧﺩﻡ‬
‫ﻭﺍﻟﻧﺻﻭﺹ‬ ‫ﺍﻟﺧﻁﻭﻁ‬ ‫ﺭﺳﻡ‬ ‫ﻣﺛﻝ‬ ،‫ﺍﻷﺑﻌﺎﺩ‬ ‫ﺛﻧﺎﺋﻲ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺗﺧﺹ‬ ‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬
‫ﻭﺍﻟﺩﻭﺍﺋﺭ‬..‫ﺍﻟﺦ‬.

‫ﻣﺛﺎﻝ‬2:
‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻋﺭﺽ‬

‫ﺍﻝ‬ ‫ﻓﺈﻥ‬ ،‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻓﻲ‬ ‫ﺷﺎﻫﺩﻧﺎ‬ ‫ﻛﻣﺎ‬Canvas‫ﺭﺳﻡ‬ ‫ﻳﺩﻋﻡ‬
‫ﺑﺷﻛﻝ‬ ‫ﺭﺳﻣﻪ‬ ‫ﻳﺗﻡ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﻭﺣﻳﺩ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻭﻫﻭ‬ ،‫ﻣﺑﺎﺷﺭﺓ‬ ‫ﺍﻟﻣﺳﺗﻁﻳﻝ‬ ‫ﺷﻛﻝ‬
‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﻣﺑﺎﺷﺭ‬Canvas‫ﺏ‬ ‫ﺑﺫﻟﻙ‬ ‫ﺍﻟﻘﻳﺎﻡ‬ ‫ﻋﻠﻳﻙ‬ ‫ﺃﺧﺭﻯ‬ ‫ﺃﺷﻛﺎﻝ‬ ‫ﻭﻟﺭﺳﻡ‬ ،
‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻭﺫﻟﻙ‬ ،‫ﻧﻔﺳﻙ‬Path^_^‫ﻭﺍﻝ‬ ،Paths‫ﻫﻲ‬
‫ﺍﻟﻣﺳﺗﻘﻳﻣﺔ‬ ‫ﺍﻟﺧﻁﻭﻁ‬ ‫ﻣﻥ‬ ‫ﻣﺟﻣﻭﻋﺔ‬ ‫ﻣﻥ‬ ‫ﺇﻧﺷﺎﺋﻬﺎ‬ ‫ﻳﺗﻡ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻷﺷﻛﺎﻝ‬
‫ﻭﺍﻟﻣﻧﺣﻧﻳﺔ‬^_^‫ﻣﺛﻝ‬ ،:
‫ﻧﻛﺗﺏ‬ ‫ﺃﻥ‬ ‫ﺭﺃﻳﻙ‬ ‫ﻣﺎ‬ ‫ﻭﺍﻵﻥ‬
‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬
‫ﺍﻟﺷﻛﻝ؟‬ ‫ﺑﻬﺫﺍ‬

‫ﻣﺛﺎﻝ‬3:
‫ﻫﺫﻩ‬ ‫ﺷﺎﻫﺩ‬
‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬
‫ﻗﻡ‬ ‫ﺛﻡ‬ ‫ﻭﻣﻥ‬
‫ﻭﺷﺎﻫﺩ‬ ،‫ﺑﺗﻁﺑﻳﻘﻬﺎ‬
‫ﺫﻟﻙ‬ ‫ﻭﺑﻌﺩ‬ ،‫ﺍﻟﻧﺗﻳﺟﺔ‬
‫ﻟﻠﺷﺭﻳﺣﺔ‬ ‫ﺇﻧﺗﻘﻝ‬
‫ﺣﺗﻰ‬ ‫ﺍﻟﺗﺎﻟﻳﺔ‬
‫ﻣﺎ‬ ‫ﻧﺗﺩﺍﺭﺱ‬
‫ﻛﺗﺎﺑﺗﻪ‬ ‫ﺗﻣﺕ‬_^*

‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﺷﺭﺡ‬:
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())

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
‫ﻫﻲ‬)0,0(‫ﺍﻝ‬ ‫ﻳﺳﺎﺭ‬ ‫ﺃﻋﻠﻰ‬Canvas..‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺃﻣﺎ‬)‫ﺍﻟﻘﻳﻡ‬(
‫ﻓﻬﻲ‬ ‫ﻣﻧﺎ‬ ‫ﺍﻟﻣﻁﻠﻭﺑﺔ‬)x, y(‫ﺍﻟﺧﻁ‬ ‫ﻫﺫﺍ‬ ‫ﺳﻳﻧﺗﻬﻲ‬ ‫ﺃﻭ‬ ‫ﺳﻳﻘﻑ‬ ‫ﺃﻳﻥ‬ ‫ﺗﺣﺩﺩ‬ ‫ﻭﻫﻲ‬
‫ﻣﻥ‬ ‫ﺑﺩﺃﺕ‬ ‫ﺃﻧﻧﻲ‬ ‫ﺇﻓﺗﺭﺿﻧﺎ‬ ‫ﻟﻭ‬ ‫ﻓﻣﺛﻼ‬)0,0(‫ﺍﻟﻘﻳﻡ‬ ‫ﺑﺈﺩﺧﺎﻝ‬ ‫ﻭﻗﻣﺕ‬
)100,200(‫ﻣﻥ‬ ‫ﺍﻋﺗﺑﺎﺭ‬ ‫ﺭﺳﻣﻪ‬ ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺧﻁ‬ ‫ﻓﺈﻥ‬0‫ﺳﻳﻧﻲ‬0،‫ﺻﺎﺩﻱ‬
‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﺍﻟﻰ‬100،‫ﺳﻳﻧﻲ‬200‫ﺻﺎﺩﻱ‬..^_^

closePath():‫ﺭﺳﻡ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻘﻭﻡ‬path‫ﻗﻣﺕ‬ ‫ﻧﻘﻁﺔ‬ ‫ﺁﺧﺭ‬ ‫ﻣﻥ‬
‫ﺍﻟﺷﻛﻝ‬ ‫ﺑﺈﻏﻼﻕ‬ ‫ﻧﻘﻭﻡ‬ ‫ﻓﻌﻠﻳﺎ‬ ‫ﺃﻧﻧﺎ‬ ‫ﺃﻱ‬ ،‫ﺍﻟﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﺍﻟﻰ‬ ‫ﺭﺟﻭﻋﺎ‬ ‫ﺑﺭﺳﻣﻬﺎ‬
‫ﺑﺑﻌﺿﻬﺎ‬ ‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺟﻣﻳﻊ‬ ‫ﺗﺗﺻﻝ‬ ‫ﺑﺣﻳﺙ‬ ‫ﺑﺭﺳﻣﻪ‬ ‫ﻧﻘﻭﻡ‬ ‫ﺍﻟﺫﻱ‬...
Fill():‫ﺗﻌﺑﺋﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻘﻭﻡ‬
‫ﺍﻟﻠﻭﻥ‬ ‫ﻭﻳﻛﻭﻥ‬ ،‫ﺭﺳﻣﻪ‬ ‫ﺍﻟﻣﺭﺍﺩ‬ ‫ﺍﻟﺷﻛﻝ‬
‫ﺍﻷﺳﻭﺩ‬ ‫ﺍﻟﻠﻭﻥ‬ ‫ﻫﻭ‬ ‫ﻟﻠﺗﻌﺑﺋﺔ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻲ‬
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻟﻠﻭﻥ‬ ‫ﺗﻐﻳﻳﺭ‬ ‫ﻭﻳﻣﻛﻥ‬fillStyle‫ﻛﺎﻥ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻭﻓﻲ‬ ،
‫ﺍﻟﺗﻌﺑﺋﺔ‬ ‫ﻟﻭﻥ‬ ‫ﻫﻭ‬ ‫ﺃﺣﻣﺭ‬ ‫ﺍﻟﻠﻭﻥ‬_^*

lineWidth:‫ﻟﻠﺧﻁ‬ ‫ﺍﻟﺳﻣﻙ‬ ‫ﻣﻘﺩﺍﺭ‬ ‫ﻟﺗﺣﺩﻳﺩ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﺳﺗﺧﺩﻡ‬
‫ﺍﻟﺣﺎﻟﻳﺔ‬ ‫ﺍﻟﺳﻣﻙ‬ ‫ﻗﻳﻣﺔ‬ ‫ﻹﺭﺟﺎﻉ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺍﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻥ‬ ‫ﻛﻣﺎ‬ ،‫ﺍﻟﻣﺭﺳﻭﻡ‬
‫ﺍﻟﻣﺭﺳﻭﻡ‬ ‫ﻟﻠﺧﻁ‬:P‫ﺑﺎﻟﺑﻛﺳﻝ‬ ‫ﻗﻳﻣﺗﻪ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻳﺗﻡ‬ ‫ﺍﻟﺧﻁ‬ ‫ﺳﻣﻙ‬ ‫ﻁﺑﻌﺎ‬ ،^^
‫ﺑﺳﻣﻙ‬ ‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻧﻔﺱ‬ ‫ﺷﺎﻫﺩ‬15‫ﺑﻛﺳﻝ‬:

strokeStyle:‫ﻭﻣﻥ‬ ،‫ﺑﺎﻟﺭﺳﻡ‬ ‫ﺍﻟﻣﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﺧﻁ‬ ‫ﻟﻭﻥ‬ ‫ﺗﻐﻳﻳﺭ‬ ‫ﻟﻧﺎ‬ ‫ﺗﺗﻳﺢ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬
‫ﺍﻷﺣﻣﺭ‬ ‫ﻣﺛﻝ‬ ‫ﻋﺎﺩﻱ‬ ‫ﻟﻭﻥ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﺇﻣﻛﺎﻧﻳﺔ‬ ‫ﻫﻲ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻟﻬﺫﻩ‬ ‫ﺍﻟﻣﺗﺎﺣﺔ‬ ‫ﺍﻟﺟﻣﻳﻠﺔ‬ ‫ﺍﻟﺧﻳﺎﺭﺍﺕ‬
‫ﻭﺍﻷﺻﻔﺭ‬..‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﺃﻭ‬ ،‫ﺍﻟﺦ‬Gradient‫ﺃﻭ‬pattern‫ﺍﻟﺻﻳﻐﺔ‬ ‫ﺗﻛﻭﻥ‬ ‫ﻭﺑﻬﺫﺍ‬
‫ﻫﻲ‬ ‫ﺍﻟﻌﺎﻣﺔ‬:
context.strokeStyle=color|gradient|pattern;
‫ﺍﻝ‬ ‫ﻹﺳﺗﺧﺩﺍﻡ‬gradient‫ﻫﻲ‬ ‫ﺃﺧﺭﻯ‬ ‫ﺩﺍﻟﺔ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻋﻠﻳﻙ‬ ‫ﻳﺟﺏ‬
createLinearGradient‫ﺍﻝ‬ ‫ﻭﻹﺳﺗﺧﺩﺍﻡ‬pattern‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻋﻠﻳﻙ‬ ‫ﻳﺟﺏ‬
createPattern‫ﺍﻝ‬ ‫ﺗﺄﺧﺫ‬ ‫ﺑﺣﻳﺙ‬ ،obj‫ﺍﻟﻧﺎﺗﺞ‬
‫ﺑﺎﻝ‬ ‫ﺍﻟﺧﺎﺻﺔ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺗﺟﻌﻠﻪ‬ ‫ﻣﻧﻬﻡ‬
strokeStyle‫ﺍﻟﺗﻌﺩﻳﻼﺕ‬ ‫ﺑﻌﺽ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺎﻹﺿﺎﻓﺔ‬
‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬ ،‫ﺍﻟﻁﻔﻳﻔﺔ‬:

‫ﺍﻝ‬ ‫ﻭﺃﺧﻳﺭﺍ‬stroke():‫ﺗﻁﺑﻳﻖ‬ ‫ﺃﻭ‬ ‫ﺑﺗﻧﻔﻳﺫ‬ ‫ﺗﻘﻭﻡ‬ ‫ﻣﻥ‬ ‫ﻓﻌﻠﻳﺎ‬ ‫ﻫﻲ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬
‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻟﺧﺻﺎﺋﺹ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺑﺑﻧﺎﺋﻪ‬ ‫ﻗﻣﻧﺎ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﺭﺳﻡ‬moveTo‫ﻭ‬
lineTo‫ﺍﻷﺳﻭﺩ‬ ‫ﺍﻟﻠﻭﻥ‬ ‫ﻫﻭ‬ ‫ﻟﻪ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻲ‬ ‫ﻭﺍﻟﻠﻭﻥ‬ ،...
‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺑﻌﺽ‬ ‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬^_^

‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻟﻬﺫﺍ‬ ‫ﺗﻧﺗﺑﻪ‬ ‫ﺃﻥ‬ ‫ﺃﺭﻳﺩﻙ‬ ،‫ﺍﻵﻥ‬‫ﻋﺩﺓ‬ ‫ﺍﻟﻰ‬ ‫ﺑﺗﻘﺳﻳﻣﺔ‬ ‫ﺳﺄﻗﻭﻡ‬ ‫ﻭﺍﻟﺫﻱ‬
‫ﺃﺟﺯﺍء‬:
‫ﻣﺛﺎﻝ‬4-‫ﺃ‬:‫ﺍﻟﺷﻛﻝ‬ ‫ﻟﻁﺑﺎﻋﺔ‬ ‫ﺑﺭﻣﺟﻳﺔ‬ ‫ﺷﻳﻔﺭﺓ‬ ‫ﺑﻛﺗﺎﺑﺔ‬ ‫ﺍﻟﻘﻳﺎﻡ‬ ‫ﻣﻧﻙ‬ ‫ﻁﻠﺑﺕ‬ ‫ﻟﻭ‬
‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﻛﺗﺎﺑﺔ‬ ‫ﺣﺎﻭﻝ‬ ‫ﺫﻟﻙ؟‬ ‫ﺗﺳﺗﻁﻳﻊ‬ ‫ﻫﻝ‬ ،‫ﺍﻷﺳﻔﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﻣﻭﺟﻭﺩ‬
‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﻟﺗﺭﻯ‬ ‫ﺇﻧﺗﻘﻝ‬ ‫ﺫﻟﻙ‬ ‫ﺑﻌﺩ‬ ،‫ﺗﻌﻠﻣﻧﺎﻩ‬ ‫ﻭﻣﻣﺎ‬ ‫ﺳﻬﻠﺔ‬ ‫ﺷﻳﻔﺭﺓ‬ ‫ﻓﻬﻲ‬ ،‫ﻟﻪ‬
‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﺍﻟﺷﺭﻳﺣﺔ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬:

‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﻟﻠﺷﻛﻝ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬:
‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﺇﻥ‬
،‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﺳﺗﺭﺳﻡ‬
‫ﺃﻥ‬ ‫ﺃﻋﺗﻘﺩ‬ ‫ﻛﻣﺎ‬ ‫ﻟﻛﻥ‬
‫ﺍﻟﻣﺭﺑﻊ‬ ‫ﺗﻌﺑﺋﺔ‬ ‫ﺣﺎﻭﻟﺕ‬
،‫ﺁﺧﺭ‬ ‫ﺑﻠﻭﻥ‬ ‫ﺍﻷﺑﻳﺽ‬
‫ﺑﺎﺋﺕ‬ ‫ﺍﻟﻣﺣﺎﻭﻟﺔ‬ ‫ﻟﻛﻥ‬
‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺑﺎﻟﻔﺷﻝ‬
Fill..‫ﻟﻣﺎﺫﺍ؟‬

‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺳﺎﺑﻖ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﺑﺭﺳﻡ‬ ‫ﻗﻣﺕ‬ ‫ﻟﻘﺩ‬lineTo‫ﻭﺍﻝ‬moveTo
‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻋﻣﻠﻳﺔ‬ ‫ﻟﻛﻥ‬ ،‫ﺗﻌﻠﻣﻧﺎﻩ‬ ‫ﻣﺎ‬ ‫ﻭﻫﻭ‬moveTo‫ﺍﻟﻣﻭﻗﻊ‬ ‫ﻧﻘﻝ‬ ‫ﺗﻌﻧﻲ‬
‫ﺍﻝ‬ ‫ﺃﻥ‬ ‫ﻳﻌﻧﻲ‬ ‫ﻭﻫﺫﺍ‬ ،‫ﺧﻁ‬ ‫ﺭﺳﻡ‬ ‫ﺩﻭﻥ‬ ‫ﺃﺧﺭﻯ‬ ‫ﺍﻟﻰ‬ ‫ﻧﻘﻁﺔ‬ ‫ﻣﻥ‬path‫ﻳﺩﻭﺭ‬ ‫ﻟﻥ‬
‫ﺍﻝ‬ ‫ﻓﺈﻥ‬ ‫ﻟﻬﺫﺍ‬ ،‫ﻣﺗﺻﻠﺔ‬ ‫ﺣﻠﻘﺔ‬ ‫ﺿﻣﻥ‬Fill‫ﺗﻅﻬﺭ‬ ‫ﻓﻠﻥ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻣﻬﺎ‬ ‫ﻗﻣﺕ‬ ‫ﻟﻭ‬
‫ﺍﻝ‬ ‫ﻷﻥ‬ ،‫ﺍﻟﺷﻛﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺗﻌﺑﺋﺔ‬ ‫ﺃﻱ‬Fill‫ﺍﻟﻰ‬ ‫ﺗﺣﺗﺎﺝ‬path‫ﻭﻻ‬ ،‫ﻣﺗﺻﻝ‬
‫ﻣﻐﻠﻘﺎ‬ ‫ﻳﻛﻭﻥ‬ ‫ﺃﻥ‬ ‫ﺑﻣﺗﺻﻝ‬ ‫ﺃﻗﺻﺩ‬...
‫ﺍﻟﺷﻛﻝ‬ ‫ﻫﺫﺍ‬ ‫ﺭﺳﻡ‬ ‫ﻣﻧﻙ‬ ‫ﻁﻠﺑﺕ‬ ‫ﻟﻭ‬ ‫ﻣﺎﺫﺍ‬ ‫ﻭﺍﻵﻥ‬:
‫ﺍﻟﻣﺛﺎﻝ‬4-‫ﺏ‬) :‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﺑﻛﺗﺎﺑﺔ‬ ‫ﻗﻡ‬(
‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﻟﻠﺷﺭﻳﺣﺔ‬ ‫ﺇﻧﺗﻘﻝ‬ ‫ﺫﻟﻙ‬ ‫ﺑﻌﺩ‬^_^

‫ﻟﻠﻣﺛﺎﻝ‬ ‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬4-‫ﺏ‬:
‫ﺑﺭﺳﻡ‬ ‫ﻗﻳﺎﻣﻙ‬ ‫ﻋﻧﺩ‬ ‫ﺍﻵﻥ‬Custom Shape
‫ﻟﺗﻌﺑﺋﺔ‬ ‫ﻁﺭﻳﻘﺔ‬ ‫ﻋﻥ‬ ‫ﺍﻟﺑﺣﺙ‬ ‫ﻋﻠﻳﻙ‬ ‫ﻳﺟﺏ‬
‫ﺑﺄﻛﺛﺭ‬ ‫ﻫﺫﺍ‬ ‫ﻳﺗﻡ‬ ‫ﺃﻥ‬ ‫ﻭﻳﻣﻛﻥ‬ ،‫ﺍﻟﻧﻘﺎﻁ‬ ‫ﺗﻠﻭﻳﻥ‬ ‫ﺃﻭ‬
‫ﻫﻲ‬ ‫ﺍﻟﻁﺭﻕ‬ ‫ﺃﻫﻡ‬ ‫ﻭﻣﻥ‬ ،‫ﻁﺭﻳﻘﺔ‬ ‫ﻣﻥ‬
‫ﺍﻟﻁﺑﻘﺎﺕ‬ ‫ﻓﻛﺭﺓ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬)Layers(
‫ﻓﻭﻕ‬ ‫ﺷﻛﻝ‬ ‫ﺭﺳﻡ‬ ‫ﺃﻭ‬ ‫ﺇﺿﺎﻓﺔ‬ ‫ﻳﺗﻡ‬ ‫ﺑﺣﻳﺙ‬
‫ﻳﻅﻬﺭ‬ ‫ﻭﺑﻬﺫﺍ‬ ،‫ﺗﻌﺑﺋﺗﻪ‬ ‫ﺍﻟﻣﻁﻠﻭﺏ‬ ‫ﺍﻟﺷﻛﻝ‬
‫ﻓﻲ‬ ‫ﻫﻧﺎ‬ ‫ﻻﺣﻅ‬ ،‫ﺑﻪ‬ ‫ﻧﺭﻏﺏ‬ ‫ﻛﺎ‬ ‫ﺍﻟﺷﻛﻝ‬
‫ﻧﻔﺱ‬ ‫ﻓﻲ‬ ‫ﻣﺳﺗﻁﻳﻝ‬ ‫ﺑﺭﺳﻡ‬ ‫ﻗﻣﻧﺎ‬ ‫ﻟﻘﺩ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫ‬
‫ﺍﻷﺯﺭﻕ‬ ‫ﺑﺎﻟﻠﻭﻥ‬ ‫ﺑﺗﻌﺑﺋﺗﻬﺎ‬ ‫ﻧﺭﻏﺏ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﻣﺳﺎﺣﺔ‬
^_^..

‫ﻭﺍﻵﻥ‬..
‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﻫﻝ‬
‫ﺍﻟﻣﺛﺎﻟﻳﻥ‬ ‫ﺭﺳﻡ‬
‫ﺍﻟﺳﺎﺑﻘﻳﻥ‬
‫ﺑﺷﻳﻔﺭﺓ‬
‫ﺃﻛﺛﺭ‬ ‫ﺑﺭﻣﺟﺔ‬
‫ﻭﺃﻗﻝ‬ ‫ﺇﺣﺗﺭﺍﻓﻳﺔ‬
‫ﺍﻷﺳﻁﺭ؟‬ ‫ﺑﻌﺩﺩ‬
،‫ﻧﻌﻡ‬ ‫ﺍﻟﺟﻭﺍﺏ‬
‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﺷﺎﻫﺩ‬:

‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﺑﺎﺳﺗﺧﺩﺍﻡ‬ ‫ﻗﻣﺕ‬ ‫ﻟﻘﺩ‬lineCap‫ﻭ‬lineJoin‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻓﻲ‬
‫؟‬ ‫ﺍﻟﺧﺎﺻﻳﺗﻳﻥ‬ ‫ﻫﺎﺗﻳﻥ‬ ‫ﻣﻥ‬ ‫ﻛﻝ‬ ‫ﻭﻅﻳﻔﺔ‬ ‫ﻫﻲ‬ ‫ﻣﺎ‬ ‫ﺗﻌﻠﻡ‬ ‫ﻫﻝ‬ ‫ﻟﻛﻥ‬ ،‫ﺍﻟﺳﺎﺑﻖ‬
‫ﺍﻟﺧﺎﺻﻳﺗﻳﻥ‬ ‫ﻫﺎﺗﻳﻥ‬ ‫ﻭﻓﺎﺋﺩﺓ‬ ‫ﺍﻟﻔﺭﻕ‬ ‫ﻟﻣﻌﺭﻓﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﺃﻭﻻ‬ ‫ﺷﺎﻫﺩ‬:
‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﻟﻠﺷﺭﻳﺣﺔ‬ ‫ﺇﻧﺗﻘﻝ‬ ،‫ﻟﻠﺻﻭﺭﺓ‬ ‫ﻣﺷﺎﻫﺩﺗﻙ‬ ‫ﺑﻌﺩ‬:

lineCap:‫ﺍﻟﺷﻛﻝ‬ ‫ﺇﺭﺟﺎﻉ‬ ‫ﺃﻭ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﻥ‬ ‫ﻣﺳﺅﻭﻟﺔ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬
‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻣﺛﻝ‬ ،‫ﻟﻠﺧﻁ‬ ‫ﺍﻟﻧﻬﺎﻳﺔ‬ ‫ﺑﻧﻘﻁﺔ‬ ‫ﺍﻟﺧﺎﺹ‬round‫ﺑﺣﻳﺙ‬
‫ﻓﻲ‬ ‫ﺃﻧﻪ‬ ‫ﺣﻳﻥ‬ ‫ﻓﻲ‬ ‫ﻣﺳﺗﺩﻳﺭ‬ ‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺧﻁ‬ ‫ﻧﻬﺎﻳﺔ‬ ‫ﺷﻛﻝ‬ ‫ﻛﺎﻥ‬
‫ﻛﺫﻟﻙ‬ ‫ﻳﻛﻥ‬ ‫ﻟﻡ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬ ‫ﺍﻟﺣﺎﻟﺔ‬...
‫ﻣﻼﺣﻅﺔ‬:‫ﺍﻟﻘﻳﻣﺔ‬round‫ﻭ‬square‫ﻣﺎ‬ ‫ﻧﻭﻋﺎ‬ ‫ﺃﻁﻭﻝ‬ ‫ﺍﻟﺧﻁ‬ ‫ﺗﺟﻌﻝ‬...
lineJoin:‫ﺍﻟﺷﻛﻝ‬ ‫ﺇﺭﺟﺎﻉ‬ ‫ﺃﻭ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﻥ‬ ‫ﻣﺳﺅﻭﻟﺔ‬ ‫ﺍﻟﺧﺎﺻﻳﺔ‬ ‫ﻫﺫﻩ‬
‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻣﺛﻝ‬ ،‫ﻣﻌﺎ‬ ‫ﺧﻁﻳﻥ‬ ‫ﺍﻟﺗﻘﺎء‬ ‫ﺑﻧﻘﻁﺔ‬ ‫ﺍﻟﺧﺎﺹ‬round‫ﺑﺣﻳﺙ‬
‫ﻣﻧﺣﻰ‬ ‫ﺷﻛﻝ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻹﻟﺗﻘﺎء‬ ‫ﻧﻘﻁﺔ‬ ‫ﺷﻛﻝ‬ ‫ﻛﺎﻥ‬)‫ﻣﺳﺗﺩﻳﺭ‬(

‫ﺍﻵﻥ‬ ‫ﺗﻛﻭﻥ‬ ‫ﺃﻥ‬ ‫ﺃﺭﺟﻭﺍ‬ ‫ﻟﻛﻥ‬ ،‫ﻣﻌﺎ‬ ‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺟﻣﻳﻊ‬ ‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬
‫ﺃﺛﻧﺎء‬ ‫ﺗﻔﻛﺭ‬ ‫ﺗﻛﻭﻥ‬ ‫ﺃﻥ‬ ‫ﻭﺣﺎﻭﻝ‬ ،‫ﺍﻟﺳﺎﺑﻘﺔ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﺟﻣﻳﻊ‬ ‫ﺑﺗﻁﺑﻳﻖ‬ ‫ﻗﻣﺕ‬ ‫ﻗﺩ‬
‫ﻭﻓﻬﻡ‬ ‫ﻟﻣﺷﺎﻫﺩﺓ‬ ‫ﺧﺻﺎﺋﺹ‬ ‫ﻭﺇﺿﺎﻓﺔ‬ ‫ﻭﺣﺫﻑ‬ ‫ﺍﻟﻘﻳﻡ‬ ‫ﺗﻐﻳﻳﺭ‬ ‫ﻭﺣﺎﻭﻝ‬ ،‫ﺍﻟﺗﻁﺑﻳﻖ‬
‫ﺍﻟﺻﺣﻳﺣﺔ‬ ‫ﺑﺎﻟﻁﺭﻳﻘﺔ‬ ‫ﺍﻟﻧﺗﺎﺋﺞ‬^_^

‫ﺍﻷﻳﻭﺑﻲ‬ ‫ﺍﻟﺩﻳﻥ‬ ‫ﺻﻼﺡ‬–‫ﺗﻌﺎﻟﻰ‬ ‫ﷲ‬ ‫ﺭﺣﻣﻪ‬--

‫ﻣﺛﺎﻝ‬5:‫ﺍﻝ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬Canvas‫ﺍﻟﺻﻭﺭ‬ ‫ﺭﺳﻡ‬ ‫ﻳﻣﻛﻧﻧﺎ‬^_^،‫ﻧﻌﻡ‬ ،
‫ﻭﻣﻥ‬ ،‫ﺭﺳﻣﻬﺎ‬ ‫ﺍﻟﻣﺭﺍﺩ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺃﺧﺫ‬ ‫ﻋﻠﻰ‬ ‫ﺗﻘﻭﻡ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﻋﻣﻠﻳﺔ‬ ،‫ﺗﺗﻌﺟﺏ‬ ‫ﻻ‬
‫ﻟﻧﺎ‬ ‫ﻳﺗﻳﺢ‬ ‫ﻛﻣﺎ‬ ،‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻫﻲ‬ ‫ﻛﻣﺎ‬ ‫ﺑﺎﻟﺑﻛﺳﻝ‬ ‫ﺍﻟﺷﺎﺷﺔ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺗﻧﻔﻳﺫ‬ ‫ﺛﻡ‬
‫ﺍﻝ‬Canvas‫ﻫﻝ‬ ،‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺑﻁﺑﻳﻌﺔ‬ ‫ﺍﻟﺗﺣﻛﻡ‬ ‫ﺍﻟﺻﻭﺭ‬ ‫ﺭﺳﻡ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬
‫ﺍﻹﻓﺗﺭﺍﺿﻲ‬ ‫ﺑﺷﻛﻠﻬﺎ‬ ‫ﻧﺭﺳﻣﻬﺎ‬)Normal Scale(‫ﻣﻣﺗﺩ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺃﻡ‬
/‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻣﻥ‬ ‫ﺃﻁﻭﻝ‬)stretched(‫ﻣﻥ‬ ‫ﺟﺯء‬ ‫ﺍﻗﺗﺑﺳﻧﺎ‬ ‫ﺃﻧﻧﺎ‬ ‫ﺃﻭ‬
‫ﺍﻟﺻﻭﺭﺓ‬)Slicing... (‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﺗﻧﻔﻳﺫﻫﺎ‬ ‫ﻳﻣﻛﻥ‬ ‫ﺍﻷﻣﻭﺭ‬ ‫ﻫﺫﻩ‬ ،‫ﺍﻟﺦ‬
‫ﺍﻟﺩﺍﻟﺔ‬drawImage()‫ﻣﻥ‬ ‫ﻧﻭﻉ‬ ‫ﻹﻋﻁﺎء‬ ‫ﺟﺩﺍ‬ ‫ﻣﻔﻳﺩﺓ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻭﻫﺫﻩ‬ ،
‫ﻓﻲ‬ ‫ﺃﺳﺭﻉ‬ ‫ﺃﻧﻬﺎ‬ ‫ﻛﻣﺎ‬ ،‫ﺍﻟﻣﺧﺗﻠﻔﺔ‬ ‫ﺍﻟﺣﺭﻛﺎﺕ‬ ‫ﺃﻭ‬ ‫ﺍﻷﻟﻌﺎﺏ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺟﻣﺎﻟﻳﺔ‬ ‫ﺍﻟﺗﺄﺛﻳﺭﺍﺕ‬
‫ﺍﻷﺧﺭﻯ‬ ‫ﺍﻷﻧﻣﺎﻁ‬ ‫ﺑﻌﺽ‬ ‫ﻣﻥ‬ ‫ﺍﻷﺣﻳﺎﻥ‬ ‫ﺑﻌﺽ‬..._^*

‫ﺍﻟﺩﺍﻟﺔ؟‬ ‫ﻫﺫﻩ‬ ‫ﺑﻪ‬ ‫ﺗﻘﻭﻡ‬ ‫ﻣﺎ‬ ‫ﻭﺣﺩﻩ‬ ‫ﻫﺫﺍ‬ ‫ﻫﻝ‬ ‫ﻭﺍﻵﻥ‬
‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﻓﻳﺩﻳﻭ‬ ‫ﺭﺳﻡ‬ ‫ﺗﺳﺗﻁﻳﻊ‬ ‫ﺃﻳﺿﺎ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻓﻬﺫﻩ‬ ،‫ﻻ‬ ‫ﻁﺑﻌﺎ‬Canvas
^_^‫ﺍﻟﺑﺩء‬ ‫ﻳﻣﻛﻧﻬﺎ‬ ‫ﻻ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺃﻥ‬ ‫ﻭﻫﻲ‬ ،‫ﻣﻬﻣﺔ‬ ‫ﻣﻼﺣﻅﺔ‬ ‫ﻫﻧﺎﻙ‬ ‫ﻟﻛﻥ‬ ،
‫ﻧﺳﺗﺧﺩﻡ‬ ‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﻋﻣﻝ‬ ‫ﻭﻟﻧﺿﻣﻥ‬ ،‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺗﺣﻣﻳﻝ‬ ‫ﻗﺑﻝ‬ ‫ﺑﺎﻟﺭﺳﻡ‬
onload‫ﺍﻟﺟﻣﻳﻝ‬ ‫ﺑﺷﻛﻠﻬﺎ‬ ‫ﺍﻷﻣﻭﺭ‬ ‫ﺗﺳﻳﺭ‬ ‫ﻭﺑﻬﺫﺍ‬ ،^^‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬ ،
‫ﺍﻟﺩﺍﻟﺔ‬ ‫ﻫﺫﻩ‬ ‫ﻋﻠﻰ‬ ‫ﻋﻣﻠﻳﺎ‬ ‫ﻣﺛﺎﻻ‬^_^
‫ﻣﻼﺣﻅﺔ‬:window.onload()‫ﺃﻭ‬
document.getElementById("imageID").onload
‫ﻻ‬ ‫ﺃﻡ‬ ‫ﺗﺣﻣﻳﻠﻬﺎ‬ ‫ﺗﻡ‬ ‫ﺍﻟﻣﻁﻠﻭﺑﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺃﻥ‬ ‫ﻣﻥ‬ ‫ﻟﻠﺗﺣﻘﻖ‬ ‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬ ‫ﻳﻣﻛﻧﻧﺎ‬..

‫ﺍﻟﻌﻧﻭﺍﻥ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺧﺎﻣﺱ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻟﻧﺷﺎﻫﺩ‬ ‫ﻭﺍﻵﻥ‬:
‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬
‫ﺣﺟﻣﻬﺎ‬ ‫ﺍﻷﺻﻠﻳﺔ‬
256*256‫ﻭﺍﻟﺻﻭﺭﺓ‬
‫ﺍﻟﺭﺳﻡ‬ ‫ﻋﻣﻠﻳﺔ‬ ‫ﺑﻌﺩ‬ ‫ﺍﻟﻧﺎﺗﺟﺔ‬
‫ﺑﺣﺟﻡ‬256*256
‫ﻋﻠﻰ‬ ‫ﺑﺭﺳﻣﻬﺎ‬ ‫ﻗﻣﺕ‬ ‫ﻟﻛﻧﻧﻲ‬
‫ﺑﻌﺩ‬100‫ﻣﻥ‬ ‫ﺑﻛﺳﻝ‬
‫ﺍﻟﺧﺎﺹ‬ ‫ﺍﻟﺳﻳﻧﻲ‬ ‫ﺍﻟﻣﺣﻭﺭ‬
‫ﺑﺎﻝ‬Canvas^_^..
‫ﺍﻟﺷﺭﻳﺣﺔ‬ ‫ﺍﻟﻰ‬ ‫ﻟﻧﺫﻫﺏ‬ ‫ﻭﺍﻵﻥ‬
‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﻘﻳﻡ‬ ‫ﻟﻧﺷﺭﺡ‬ ‫ﺍﻟﺗﺎﻟﻳﺔ‬
‫ﻣﻊ‬ ‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬ ‫ﻳﻣﻛﻧﻧﺎ‬
‫ﺍﻝ‬drawImage^_^

‫ﻟﻝ‬ ‫ﺍﻟﻌﺎﻣﺔ‬ ‫ﺍﻟﺻﻳﻐﺔ‬drawImage‫ﻫﻲ‬:
‫ﺍﻟﺭﻣﺯ‬ ‫ﺗﺷﺎﻫﺩ‬ ‫ﻋﻧﺩﻣﺎ‬ ‫ﺃﻭﻻ‬s‫ﻓﻌﻠﻳﻙ‬ ‫ﺍﻟﺻﻳﻐﺔ‬ ‫ﻓﻲ‬
‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻋﻠﻰ‬ ‫ﻳﻌﻭﺩ‬ ‫ﺍﻟﺭﻣﺯ‬ ‫ﻫﺫﺍ‬ ‫ﺃﻥ‬ ‫ﺗﻌﻠﻡ‬ ‫ﺃﻥ‬
‫ﺍﻷﺻﻠﻳﺔ‬)source(‫ﺍﻟﺭﻣﺯ‬ ‫ﻭﺃﻥ‬d‫ﻳﻌﻭﺩ‬
‫ﺭﺳﻣﻬﺎ‬ ‫ﺍﻟﻣﺭﺍﺩ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻋﻠﻰ‬)‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺷﺎﻫﺩ‬(
)destination. (--<‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﺍﻟﺷﺭﻳﺣﺔ‬
‫ﺟﺩﺍ‬ ‫ﻣﻬﻣﺔ‬ ‫ﺻﻭﺭﺓ‬
‫ﺍﻟﺭﻣﻭﺯ‬ ‫ﺷﺭﺡ‬ ‫ﻭﺳﻳﺗﻡ‬
‫ﻋﻠﻰ‬ ‫ﺍﻟﻣﺟﻭﺩﺓ‬
‫ﻓﻲ‬ ‫ﺍﻟﺻﻭﺭﺓ‬
‫ﺍﻟﺗﺎﻟﻳﺔ‬ ‫ﺍﻟﺷﺭﺍﺋﺢ‬..

‫ﺍﻝ‬image:‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺭﺳﻣﻪ‬ ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺍﻟﻌﻧﺻﺭ‬ ‫ﺍﻟﻣﺗﻐﻳﺭ‬ ‫ﻫﺫﺍ‬ ‫ﻳﻣﺛﻝ‬
Canvas‫ﺣﺗﻰ‬ ‫ﺃﻭ‬ ،‫ﻓﻳﺩﻳﻭ‬ ،‫ﺻﻭﺭﺓ‬ ‫ﻳﻛﻭﻥ‬ ‫ﺃﻥ‬ ‫ﻭﻳﻣﻛﻥ‬canvas‫ﺁﺧﺭ‬.
‫ﺍﻝ‬sx:‫ﻭﺍﻟﻧﻘﻁﺔ‬ ،‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﻟﻠﺻﻭﺭﺓ‬ ‫ﺍﻟﺳﻳﻧﻳﺔ‬ ‫ﺍﻟﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬
‫ﻫﻲ‬ ‫ﻟﻬﺎ‬ ‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬0‫ﺃﻧﻙ‬ ‫ﻳﻌﻧﻲ‬ ‫ﺑﻬﺎ‬ ‫ﺍﻟﺧﺎﺹ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺗﻐﻳﻳﺭ‬ ،‫ﺍﻟﻳﺳﺎﺭ‬ ‫ﻣﻥ‬
‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺗﺣﺩﺩﻳﻬﺎ‬ ‫ﻗﻣﺕ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺑﺭﺳﻡ‬ ‫ﺗﺭﻏﺏ‬
‫ﺍﻟﺳﻳﻧﻲ‬.
‫ﺍﻝ‬sy:‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬ ‫ﻭﺍﻟﻘﻳﻣﺔ‬ ،‫ﺍﻟﺻﺎﺩﻱ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬
‫ﻫﻲ‬ ‫ﻟﻬﺎ‬0‫ﻫﺫﻩ‬ ‫ﺭﺳﻡ‬ ‫ﺑﺑﺩء‬ ‫ﺗﺭﻏﺏ‬ ‫ﺃﻧﻙ‬ ‫ﻳﻌﻧﻲ‬ ‫ﻫﻧﺎ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺗﻐﻳﻳﺭ‬ ،‫ﺍﻷﻋﻠﻰ‬ ‫ﻣﻥ‬
‫ﺍﻟﺻﺎﺩﻱ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﻋﻠﻰ‬ ‫ﺑﺗﺣﺩﻳﺩﻫﺎ‬ ‫ﻗﻣﺕ‬ ‫ﺍﻟﺗﻲ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﻣﻥ‬ ‫ﺍﻟﺻﻭﺭﺓ‬...

‫ﺍﻝ‬swidth:،‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻣﻥ‬ ‫ﺇﻗﺗﻁﺎﻋﻪ‬ ‫ﺳﻳﺗﻡ‬ ‫ﻣﺎ‬ ‫ﻣﻘﺩﺍﺭ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬
‫ﺍﻟﺳﻳﻧﻲ‬ ‫ﻟﻠﻣﺣﻭﺭ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻫﺫﻩ‬ ‫ﻭﺗﻛﻭﻥ‬)‫ﻟﻠﺻﻭﺭﺓ‬ ‫ﻋﺭﺿﻲ‬ ‫ﺑﺷﻛﻝ‬ ‫ﺍﻹﻗﺗﻁﺎﻉ‬(
‫ﺍﻝ‬sheight:‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻣﻥ‬ ‫ﺇﻗﺗﻁﺎﻋﺔ‬ ‫ﺳﻳﺗﻡ‬ ‫ﻣﺎ‬ ‫ﻣﻘﺩﺍﺭ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬
‫ﺍﻟﺻﺎﺩﻱ‬ ‫ﻟﻠﻣﺣﻭﺭ‬ ‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻛﻭﻥ‬ ‫ﻭﺑﻬﺫﺍ‬ ،‫ﺭﺃﺳﻳﺎ‬)‫ﺑﺷﻛﻝ‬ ‫ﺍﻹﻧﻘﻁﺎﻉ‬
‫ﺍﻹﺭﺗﻔﺎﻉ‬ ‫ﻳﻣﺛﻝ‬ ‫ﺭﺃﺳﻲ‬(
‫ﺍﻝ‬dx:‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺳﻳﻧﻲ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬Canvas‫ﻧﻘﻁﺔ‬ ‫ﻭﻫﻲ‬ ،
‫ﺍﻝ‬ ‫ﻳﺳﺎﺭ‬ ‫ﺃﻋﻠﻰ‬ ‫ﺗﻌﻧﻲ‬ ‫ﻫﻧﺎ‬ ‫ﺻﻔﺭ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺑﺩﺍﻳﺔ‬ ،‫ﺍﻟﺯﺍﻣﻳﺔ‬canvas.

‫ﺍﻝ‬dy:‫ﺍﻝ‬ ‫ﻓﻲ‬ ‫ﺍﻟﺻﺎﺩﻱ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﻫﺫﻩ‬ ‫ﺗﻣﺛﻝ‬Canvas،‫ﺍﻟﺯﺍﻣﻳﺔ‬ ‫ﻧﻘﻁﺔ‬ ‫ﻭﻫﻲ‬ ،
‫ﺍﻝ‬ ‫ﻳﺳﺎﺭ‬ ‫ﺃﻋﻠﻰ‬ ‫ﺗﻌﻧﻲ‬ ‫ﻫﻧﺎ‬ ‫ﺻﻔﺭ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﻭﺑﺩﺍﻳﺔ‬canvas.
‫ﺍﻝ‬dWidth:‫ﺍﻟﺻﻭﺭﺓ‬ ‫ﺭﺳﻡ‬ ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺑﺎﻟﺣﻳﺯ‬ ‫ﺍﻟﺧﺎﺹ‬ ‫ﺍﻟﻌﺭﺽ‬ ‫ﻳﻣﺛﻝ‬ ‫ﺍﻟﻣﺗﻐﻳﺭ‬ ‫ﻫﺫﺍ‬
‫ﺑﻌﻣﻝ‬ ‫ﺗﺳﻣﺢ‬ ‫ﻭﻫﻲ‬ ،‫ﺑﺩﺍﺧﻠﻪ‬scaling‫ﻟﻬﺎ‬ ‫ﺍﻟﻘﻳﻣﺔ‬ ‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﺩﻡ‬ ‫ﺣﺎﻝ‬ ‫ﻭﻓﻲ‬ ،‫ﻟﻠﺻﻭﺭﺓ‬
‫ﻋﻣﻝ‬ ‫ﻳﺗﻡ‬ ‫ﻟﻥ‬scale‫ﻟﻠﺻﻭﺭﺓ‬..
‫ﺍﻝ‬dHeight:‫ﺭﺳﻡ‬ ‫ﺳﻳﺗﻡ‬ ‫ﺍﻟﺫﻱ‬ ‫ﺑﺎﻟﺣﻳﺯ‬ ‫ﺍﻟﺧﺎﺹ‬ ‫ﺍﻹﺭﺗﻔﺎﻉ‬ ‫ﻳﻣﺛﻝ‬ ‫ﺍﻟﻣﺗﻐﻳﺭ‬ ‫ﻫﺫﺍ‬
‫ﺑﻌﻣﻝ‬ ‫ﺗﺳﻣﺢ‬ ‫ﻭﻫﻲ‬ ،‫ﺑﺩﺍﺧﻠﻪ‬ ‫ﺍﻟﺻﻭﺭﺓ‬scaling‫ﺗﺣﺩﻳﺩ‬ ‫ﻋﺩﻡ‬ ‫ﺣﺎﻝ‬ ‫ﻭﻓﻲ‬ ،‫ﻟﻠﺻﻭﺭﺓ‬
‫ﻋﻣﻝ‬ ‫ﻳﺗﻡ‬ ‫ﻟﻥ‬ ‫ﻟﻬﺎ‬ ‫ﺍﻟﻘﻳﻣﺔ‬scale‫ﻟﻠﺻﻭﺭﺓ‬..
‫ﺍﻟﻘﻳﻡ‬ ‫ﻟﻬﺫﻩ‬ ‫ﺫﻛﺭﻧﺎﻩ‬ ‫ﻣﺎ‬ ‫ﻋﻠﻰ‬ ‫ﺍﻟﻣﺗﻧﻭﻋﺔ‬ ‫ﺍﻷﻣﺛﻠﺔ‬ ‫ﻣﻥ‬ ‫ﻣﺟﻣﻭﻋﺔ‬ ‫ﻟﻧﺷﺎﻫﺩ‬ ،‫ﻭﺍﻵﻥ‬^_^

‫ﻣﺛﺎﻝ‬5-‫ﺏ‬:
‫ﻟﻘﺩ‬ ،‫ﻫﻧﺎ‬ ‫ﻻﺣﻅ‬
‫ﺣﺟﻡ‬ ‫ﺑﺗﺣﺩﻳﺩ‬ ‫ﻗﻣﻧﺎ‬
‫ﺍﻟﻣﺭﺍﺩ‬ ‫ﺍﻟﺻﻭﺭﺓ‬
‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﺭﺳﻣﻬﺎ‬
Canvas‫ﺏ‬
150*175‫ﻋﻠﻰ‬
‫ﺑﻌﺩ‬50‫ﺳﻳﻧﻲ‬10
‫ﺻﺎﺩﻱ‬_^*

‫ﻣﺛﺎﻝ‬5-‫ﺝ‬:
‫ﻗﻣﻧﺎ‬ ‫ﻟﻘﺩ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬
‫ﻣﻥ‬ ‫ﺟﺯء‬ ‫ﺑﺎﻗﺗﻁﺎﻉ‬
‫ﻭﻣﻥ‬ ‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬
‫ﺩﺍﺧﻝ‬ ‫ﻣﺟﺩﺩﺍ‬ ‫ﺭﺳﻣﻪ‬ ‫ﺛﻡ‬
‫ﺍﻝ‬Canvas
‫ﻗﻣﺕ‬ ‫ﺃﻭﻻ‬ ‫ﺃﻧﻧﻲ‬ ‫ﻻﺣﻅ‬
‫ﺍﻟﻧﻘﻁﺔ‬ ‫ﺑﺗﺣﺩﻳﺩ‬20‫ﻭ‬
100‫ﻟﺗﺣﺩﻳﺩ‬ ‫ﻛﻧﻘﻁﺔ‬
‫ﻣﻥ‬ ‫ﺍﻟﻘﻁﻊ‬ ‫ﺑﺩﺍﻳﺔ‬ ‫ﻧﻘﻁﺔ‬
،‫ﺍﻷﺻﻠﻳﺔ‬ ‫ﺍﻟﺻﻭﺭﺓ‬
‫ﻭﺍﻝ‬120‫ﻣﻘﺩﺍﺭ‬ ‫ﻓﻲ‬
‫ﺑﻘﻁﻌﻪ‬ ‫ﺃﺭﻏﺏ‬ ‫ﻣﺎ‬
‫ﻭﺭﺳﻣﻪ‬^^‫ﻭ‬ ،30
‫ﻭﺍﻝ‬75‫ﺍﻟﺭﺳﻡ‬ ‫ﻣﻛﺎﻥ‬
‫ﺍﻝ‬ ‫ﻓﻲ‬canvas

‫ﻣﺛﺎﻝ‬5-‫ﺩ‬) :‫ﺭﺳﻡ‬ ‫ﻁﺭﻳﻘﺔ‬ ‫ﻳﻭﺿﺢ‬ ‫ﻣﺛﺎﻝ‬canvas‫ﺩﺍﺧﻝ‬canvas(
‫ﻟﻘﺩ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬ ‫ﻻﺣﻅ‬
‫ﺍﻝ‬ ‫ﺑﺭﺳﻡ‬ ‫ﻗﻣﻧﺎ‬Canvas
‫ﺍﻟﺳﺎﺑﻖ‬)‫ﻣﺛﺎﻝ‬5-‫ﺝ‬(
‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬ ‫ﻣﺟﺩﺩﺍ‬
Canvas5-‫ﺩ‬_^*

‫ﻣﺛﺎﻝ‬5-‫ﻫـ‬:
‫ﻣﺷﺎﻫﺩﺗﻪ‬ ‫ﻳﻣﻛﻧﻙ‬ ،‫ﺍﻟﻧﻘﺭ‬ ‫ﻋﻧﺩ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﻳﻌﻣﻝ‬ ‫ﻟﻡ‬ ‫ﺍﺫﺍ‬
‫ﺏ‬ ‫ﺍﻟﻣﻌﻧﻭﻥ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬
SampleExample‫ﺍﻟﺩﻭﺭﺓ‬ ‫ﻣﻠﻑ‬ ‫ﻓﻲ‬^_^
‫ﻭﺍﻝ‬ ،‫ﻳﻌﻣﻝ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﺃﻥ‬ ،‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﺧﻼﻝ‬ ‫ﻣﻥ‬ ‫ﻻﺣﻅ‬
Canvas‫ﺑﺳﺎﻁﺔ‬ ‫ﺑﻛﻝ‬ ‫ﻫﻲ‬ ‫ﻭﺍﻟﻔﻛﺭﺓ‬ ،‫ﻣﻌﺎ‬ ‫ﻳﻌﻣﻝ‬
‫ﺻﻭﺭﺓ‬ ‫ﻋﻥ‬ ‫ﻋﺑﺎﺭﺓ‬ ‫ﺃﺻﻼ‬ ‫ﺍﻟﻔﻳﺩﻳﻭ‬ ‫ﺑﺄﻥ‬ ‫ﺗﻛﻣﻥ‬
‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﻭﺑﻬﺫﺍ‬ ،‫ﺍﻟﻭﺍﺣﺩﺓ‬ ‫ﺍﻟﺛﺎﻧﻳﺔ‬ ‫ﻓﻲ‬ ‫ﺑﺳﺭﻋﺔ‬ ‫ﺗﺗﺣﺭﻙ‬
‫ﻭﺭﺳﻣﻬﺎ‬ ‫ﻫﻪ‬ ‫ﺍﻟﺻﻭﺭ‬ ‫ﻭﺃﺧﺫ‬ ‫ﺍﻟﻔﻛﺭﺓ‬ ‫ﺍﺳﺗﻐﻼﻝ‬
‫ﺍﻝ‬ ‫ﺩﺍﺧﻝ‬Canvas‫ﺍﻝ‬ ‫ﺇﺳﺗﺧﺩﺍﻡ‬ ‫ﻳﻣﻛﻧﻧﺎ‬ ‫ﻭﻫﻧﺎ‬ ،
setInterval_^.. *‫ﺍﻟﺑﺭﻣﺟﺔ‬ ‫ﺍﻟﺷﻳﻔﺭﺓ‬ ‫ﺷﺎﻫﺩ‬:

‫ﻣﻼﺣﻅﺔ‬:‫ﻁﺑﻌﺎ‬‫ﻟﻳﻛﻭﻥ‬‫ﺍﻟﻌﻣﻝ‬‫ﺿﻣﻥ‬‫ﺍﻟﻣﻌﺎﻳﻳﺭ‬‫ﺍﻹﺣﺗﺭﺍﻓﻳﺔ‬‫ﻓﻲ‬‫ﻛﺗﺎﺑﺔ‬
‫ﺍﻟﺷﻳﻔﺭﺓ‬،‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬‫ﻻ‬‫ﺗﻧﺳﻰ‬‫ﺩﻭﻣﺎ‬‫ﺇﻳﻘﺎﻑ‬setInterval‫ﻋﻧﺩ‬‫ﺍﻹﻧﺗﻬﺎء‬
‫ﻣﻥ‬‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬_^*،‫ﻭﻁﺑﻌﺎ‬‫ﻟﻥ‬‫ﺃﻧﻔﺫ‬‫ﻫﺫﻩ‬‫ﺍﻟﻔﻛﺭﺓ‬‫ﺑﺎﻷﻣﺛﻠﺔ‬_^*،‫ﺑﻝ‬
‫ﺣﺎﻭﻝ‬‫ﺗﻧﻔﻳﺫﻫﺎ‬‫ﺃﻧﺕ‬:P)‫ﻭﺣﺎﻭﻝ‬‫ﺣﻝ‬‫ﺍﻟﻣﺷﻛﻠﺔ‬‫ﺍﻟﺗﻲ‬‫ﺳﺗﻅﻬﺭ‬‫ﺑﻌﺩ‬‫ﺫﻟﻙ‬‫ﻣﻊ‬
‫ﺍﻟﻔﻳﺩﻳﻭ‬:P(
‫ﻭﺑﻬﺫﺍ‬‫ﻧﻛﻭﻥ‬‫ﺇﻧﺗﻬﻳﻧﺎ‬‫ﺑﻔﺿﻝ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬‫ﻣﻥ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬^_^،‫ﻭﺍﻵﻥ‬‫ﻟﻧﺷﺎﻫﺩ‬
‫ﺟﻣﻳﻊ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺳﺎﺑﻘﺔ‬^_^،‫ﻭﻻ‬‫ﺗﻧﺳﻰ‬‫ﺗﻁﺑﻳﻖ‬‫ﻫﺫﻩ‬‫ﺍﻷﻣﺛﻠﺔ‬*_*

^_^‫ﻏﺎﻣﺭﺓ‬ ‫ﻭﻓﺭﺣﺔ‬ ‫ﻧﻔﺳﻳﺔ‬ ‫ﺭﺍﺣﺔ‬^_^

‫ﻣﺛﺎﻝ‬6:‫ﻣﻥ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﻋﻠﻰ‬‫ﺍﻟﺭﺳﻭﻣﺎﺕ‬‫ﺍﻟﺑﺳﻳﻁﺔ‬،‫ﺃﻳﺿﺎ‬‫ﻭﺍﻟﺗﻲ‬‫ﻳﻣﻛﻧﻧﺎ‬
‫ﺗﻧﻔﻳﺫﻫﺎ‬‫ﻫﻲ‬‫ﺭﺳﻡ‬‫ﺍﻟﻧﺻﻭﺹ‬)draw text(^_^،‫ﻭﻳﻣﻛﻥ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬
‫ﻧﻔﺱ‬‫ﺍﻟﺧﺻﺎﺋﺹ‬‫ﻭﺍﻟﻣﺯﺍﻳﺎ‬‫ﺍﻟﺗﻲ‬‫ﻧﺳﺗﺧﺩﻣﻬﺎ‬‫ﻣﻊ‬‫ﺍﻝ‬CSS‫ﻣﺛﻝ‬‫ﺣﺟﻡ‬
‫ﺍﻟﺧﻁ‬‫ﻭﻧﻭﻋﻪ‬..‫ﺍﻟﺦ‬
‫ﻳﻣﻛﻧﻙ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬fillText()‫ﺃﻭ‬strokeText()‫ﻟﺭﺳﻡ‬‫ﺍﻟﺧﻁﻭﻁ‬‫ﺩﺍﺧﻝ‬
‫ﺍﻝ‬Canvas_^*،‫ﻭﺍﻟﺻﻳﻐﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬‫ﻫﻲ‬:
context.fillText(text,x,y,maxWidth);
‫ﺑﺣﻳﺙ‬‫ﻳﻛﻭﻥ‬‫ﺍﻟﻧﺹ‬‫ﻫﻭ‬text،‫ﻭﺍﻝ‬x‫ﻧﻘﻁﺔ‬‫ﺑﺩﺍﻳﺔ‬‫ﺍﻟﺭﺳﻡ‬‫ﻣﻥ‬‫ﺍﻟﻣﺣﻭﺭ‬،‫ﺍﻟﺳﻳﻧﻲ‬
‫ﻭﺍﻝ‬y‫ﻟﻠﻣﺣﻭﺭ‬،‫ﺍﻟﺻﺎﺩﻱ‬‫ﻭﺍﻝ‬maxWidth‫ﺃﻛﺑﺭ‬‫ﻋﺭﺽ‬‫ﻳﻣﻛﻥ‬‫ﺃﻥ‬‫ﻳﺄﺧﺫﻩ‬
‫ﺍﻟﻧﺹ‬.._^*

‫ﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﺛﻡ‬‫ﺇﻧﺗﻘﻝ‬
‫ﻟﻠﺷﺭﻳﺣﺔ‬‫ﺍﻟﺗﺎﻟﻳﺔ‬..

‫ﻓﻲ‬‫ﺍﻟﻣﺛﺎﻝ‬،‫ﺍﻟﺳﺎﺑﻖ‬‫ﺳﺄﺷﺭﺡ‬‫ﻧﻘﻁﺔ‬‫ﻭﺍﺣﺩﺓ‬‫ﻗﺩ‬‫ﺗﺛﻳﺭ‬‫ﺑﻌﺽ‬‫ﺍﻟﺭﻳﺑﺔ‬‫ﺃﺛﻧﺎء‬
،‫ﺍﻟﻌﻣﻝ‬‫ﻭﻫﻲ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻝ‬textAlign،‫ﻓﻬﺫﻩ‬‫ﺍﻟﺧﺎﺻﻳﺔ‬‫ﻣﺳﺅﻭﻟﺔ‬‫ﻋﻥ‬
‫ﺗﺣﺩﻳﺩ‬‫ﺃﻭ‬‫ﺇﺭﺟﺎﻉ‬‫ﻣﻘﺩﺍﺭ‬‫ﺍﻹﺯﺍﺣﺔ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﻬﺫﺍ‬،‫ﺍﻟﻧﺹ‬‫ﻫﻝ‬‫ﻫﻲ‬‫ﺑﺎﺗﺟﺎﻩ‬
‫ﺍﻟﻳﻣﻳﻥ‬‫ﺃﻭ‬‫ﺍﻟﻳﺳﺎﺭ‬...،‫ﺍﻟﺦ‬‫ﻭﻫﻲ‬‫ﻛﺎﻟﺗﺎﻟﻲ‬:
start:‫ﻭﻫﻲ‬‫ﺍﻟﺣﺎﻟﺔ‬،‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬‫ﻭﻳﺑﺩﺃ‬‫ﺭﺳﻡ‬‫ﺍﻟﻧﺹ‬‫ﻣﻥ‬‫ﺍﻟﻧﻘﻁﺔ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬
‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﺑﻧﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﺍﻟﻣﺣﻭﺭ‬‫ﺍﻟﺳﻳﻧﻲ‬‫ﻭﺍﻟﺻﺎﺩﻱ‬..
end:‫ﻫﻧﺎ‬‫ﻳﺟﺏ‬‫ﺃﻥ‬‫ﻳﻧﺗﻬﻲ‬‫ﺍﻟﺭﺳﻡ‬‫ﻓﻲ‬‫ﺍﻟﻧﻘﺎﻁ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﻝ‬‫ﺱ‬‫ﻭﺹ‬
Center:‫ﻫﻧﺎ‬‫ﻳﺟﺏ‬‫ﺃﻥ‬‫ﻳﻛﻭﻥ‬‫ﻣﻧﺗﺻﻑ‬‫ﺍﻟﻧﺹ‬‫ﻓﻲ‬‫ﺍﻟﻧﻘﺎﻁ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬
‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﻟﻛﻝ‬‫ﻣﻥ‬‫ﺱ‬‫ﻭ‬‫ﺹ‬.
Left:‫ﻭﻫﻧﺎ‬‫ﻳﺗﻡ‬‫ﺍﻟﺑﺩء‬‫ﺑﺭﺳﻡ‬‫ﺍﻟﻧﻘﻁﺔ‬‫ﺃﻳﺿﺎ‬‫ﻣﻥ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﺑﻧﺎﺋﺎ‬‫ﻋﻠﻰ‬‫ﻛﻝ‬‫ﻣﻥ‬
‫ﺱ‬‫ﻭ‬‫ﺹ‬.
Right:‫ﻭﻫﻧﺎ‬‫ﻳﺟﺏ‬‫ﺃﻥ‬‫ﻳﻧﺗﻬﻲ‬‫ﺍﻟﺭﺳﻡ‬‫ﻓﻲ‬‫ﺍﻟﻧﻘﺎﻁ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﺗﺣﺩﻳﺩﻫﺎ‬‫ﻝ‬‫ﺱ‬‫ﻭ‬‫ﺹ‬.

‫ﻭﺍﻟﺳﺅﺍﻝ‬‫ﺍﻟﻘﻭﻱ‬_^*،‫ﻣﺎ‬‫ﺍﻟﻔﺭﻕ‬‫ﺑﻳﻥ‬‫ﺍﻝ‬start‫ﻭﺍﻝ‬left‫؟‬
‫ﺃﻭ‬‫ﺍﻝ‬end‫ﻭﺍﻝ‬right‫؟‬
‫ﺍﻟﺟﻭﺍﺏ‬:‫ﻫﻭ‬‫ﺃﻥ‬‫ﺍﻝ‬start‫ﻫﻲ‬align left‫ﻋﻧﺩﻣﺎ‬‫ﻳﻛﻭﻥ‬‫ﺍﻟﻣﺗﺻﻔﺢ‬
LTR،‫ﻟﻛﻥ‬‫ﺍﺫﺍ‬‫ﻛﺎﻥ‬‫ﺍﻟﻣﺗﺻﻔﺢ‬RTL‫ﻓﺳﻳﻛﻭﻥ‬‫ﺍﻝ‬start‫ﻫﻭ‬
align right،‫ﻟﺫﻟﻙ‬‫ﺇﺣﺭﺹ‬‫ﻋﻠﻰ‬‫ﺍﻟﺗﺄﻛﺩ‬‫ﻣﻥ‬‫ﻋﻣﻠﻙ‬‫ﺃﺛﻧﺎء‬‫ﺭﺳﻣﻙ‬‫ﻟﻝ‬
Canvas‫ﻟﻁﺭﻳﻘﺔ‬‫ﻗﺭﺍﺋﺔ‬‫ﺍﻟﻣﺗﺻﻔﺣﺎﺕ‬‫ﻟﻠﺭﺳﻡ‬‫ﺍﻟﺧﺎﺹ‬‫ﺑﻙ‬‫ﻋﻠﻰ‬‫ﺍﻝ‬
Canvas_^*..‫ﻁﺑﻌﺎ‬‫ﻫﻧﺎﻙ‬‫ﺍﻟﻌﺩﻳﺩ‬‫ﻣﻥ‬،‫ﺍﻟﺧﺻﺎﺋﺹ‬‫ﻳﻣﻛﻧﻙ‬‫ﺍﻟﺑﺣﺙ‬
‫ﻋﻧﻬﺎ‬‫ﻭﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬‫ﻣﺛﻝ‬‫ﺍﻝ‬baseline :P‫ﻭﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬:

‫ﻣﺛﺎﻝ‬7:‫ﻭﺁﺧﺭ‬‫ﺟﺯﺋﻳﺔ‬‫ﺗﻧﺩﺭﺝ‬‫ﺗﺣﺕ‬‫ﻫﺫﺍ‬،‫ﺍﻟﻣﻭﺿﻭﻉ‬‫ﻫﻭ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﻣﺗﺩﺭﺝ‬
‫ﺍﻝ‬)Gradients(_^*
‫ﻟﺭﺳﻡ‬‫ﺃﻱ‬‫ﺗﺩﺭﻳﺞ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻟﺩﺍﻟﺔ‬createLinearGradient
‫ﻟﺭﺳﻡ‬‫ﺗﺩﺭﺝ‬‫ﺧﻁﻲ‬‫ﺃﻭ‬‫ﺍﻟﺩﺍﻟﺔ‬createRadialGradient‫ﻟﺭﺳﻡ‬
‫ﺗﺩﺭﺝ‬‫ﺷﻌﺎﻋﻲ‬‫ﺃﻭ‬‫ﻧﺻﻑ‬‫ﻗﻁﺭﻱ‬..)radial/circular(
‫ﻭﺍﻟﺳﺅﺍﻝ‬‫ﺍﻵﻥ‬^^،‫ﺃﻳﻥ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﻫﺫﺍ‬‫ﺍﻟﺗﺩﺭﺝ؟‬
‫ﺍﻟﺟﻭﺍﺏ‬:‫ﻓﻲ‬‫ﻛﻝ‬‫ﻣﻥ‬،‫ﺍﻟﻧﺻﻭﺹ‬‫ﻭﺍﻟﻣﺭﺑﻌﺎﺕ‬‫ﻭﺍﻟﺧﻁﻭﻁ‬..‫ﺍﻟﺦ‬‫ﻣﻥ‬
‫ﺍﻷﻣﻭﺭ‬‫ﺍﻟﺗﻲ‬‫ﺗﻌﻠﻣﻧﺎﻫﺎ‬‫ﺳﺎﺑﻘﺎ‬‫ﻭﻏﻳﺭﻫﺎ‬‫ﺍﻟﻣﺯﻳﺩ‬0_o_^*

‫ﻭﺍﻵﻥ‬‫ﻟﻧﺷﺎﻫﺩ‬‫ﻣﺛﺎﻻ‬:7-‫ﺃ‬:‫ﺑﻌﺩ‬‫ﻣﺷﺎﻫﺩﺓ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﻭﺍﻟﺗﺭﻛﻳﺯ‬‫ﻋﻠﻰ‬‫ﻣﺎ‬‫ﺗﻡ‬
،‫ﺗﻅﻠﻳﻠﻪ‬‫ﺇﻧﺗﻘﻝ‬‫ﻟﻠﺷﺭﻳﺣﺔ‬‫ﺍﻟﺗﺎﻟﻳﺔ‬_^*

‫ﺃﻭﻻ‬‫ﻛﻣﺎ‬،‫ﺗﻼﺣﻅ‬‫ﻓﺈﻥ‬‫ﻫﺫﺍ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﻳﻣﺛﻝ‬‫ﺭﺳﻡ‬‫ﺗﺩﺭﺝ‬‫ﻝ‬fillRect‫ﻋﻠﻰ‬
‫ﺣﺟﻣﻪ‬،‫ﺍﻟﻛﺎﻣﻝ‬‫ﻭﻧﻭﻉ‬‫ﺍﻟﺗﺩﺭﺝ‬‫ﺧﻁﻲ‬^^،‫ﻟﻛﻥ‬‫ﻣﺎ‬‫ﻫﺫﻩ‬‫ﺍﻷﺭﻗﺎﻡ‬‫ﺍﻟﻣﻭﺟﻭﺩﺓ‬
‫ﺩﺍﺧﻝ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ؟‬
‫ﺍﻟﺻﻳﻐﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬:
context.createLinearGradient(x0,y0,x1,y1);
X0:‫ﺍﻹﺣﺩﺍﺛﻲ‬‫ﺍﻟﺳﻳﻧﻲ‬‫ﻟﻧﻘﻁﺔ‬‫ﺑﺩﺍﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬.
Y0:‫ﺍﻹﺣﺩﺍﺛﻲ‬‫ﺍﻟﺻﺎﺩﻱ‬‫ﻟﻧﻘﻁﺔ‬‫ﺑﺩﺍﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬.
X1:‫ﺍﻹﺣﺩﺍﺛﻲ‬‫ﺍﻟﺳﻳﻧﻲ‬‫ﻟﻧﻘﻁﺔ‬‫ﻧﻬﺎﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬.
X2:‫ﺍﻹﺣﺩﺍﺛﻲ‬‫ﺍﻟﺻﺎﺩﻱ‬‫ﻟﻧﻘﻁﺔ‬‫ﻧﻬﺎﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬.==<‫ﺗﺎﺑﻊ‬

‫ﺃﻣﺎ‬‫ﺍﻟﺩﺍﻟﺔ‬addColorStop():‫ﻓﻬﻲ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﺍﻟﻣﺳﺅﻭﻟﺔ‬‫ﻋﻥ‬‫ﺗﺣﺩﻳﺩ‬
‫ﺍﻷﻟﻭﺍﻥ‬‫ﺍﻟﺧﺎﺻﺔ‬،‫ﺑﺎﻟﺗﺩﺭﺝ‬‫ﻭﺍﻟﻧﻘﺎﻁ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﻧﻬﺎﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬‫ﻟﻛﻝ‬،‫ﻟﻭﻥ‬
‫ﻭﻳﺗﻡ‬‫ﺗﻣﺛﻳﻝ‬‫ﺍﻟﻧﻘﻁ‬‫ﻣﻥ‬0‫ﺍﻟﻰ‬1_^*.
‫ﻣﻼﺣﻅﺔ‬:‫ﻳﺗﻡ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻝ‬object‫ﺍﻟﺧﺎﺹ‬‫ﺑﺎﻟﺗﺩﺭﺝ‬‫ﻋﻠﻰ‬‫ﺷﻛﻝ‬‫ﻗﻳﻣﺔ‬
)value(‫ﺗﻭﺿﻊ‬‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬strokeStyle‫ﺃﻭ‬fillStyle_^*
‫ﻣﻼﺣﻅﺔ‬2:‫ﻓﻲ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﻗﻣﺕ‬‫ﺑﺎﻟﺗﺣﻛﻡ‬‫ﺑﺎﺗﺟﺎﻩ‬‫ﺍﻟﺗﺩﺭﺝ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺗﺣﺩﻳﺩ‬
‫ﺍﻟﻘﻳﻡ‬‫ﻟﺑﺩﺍﻳﺔ‬‫ﻭﻧﻬﺎﻳﺔ‬‫ﺍﻟﺗﺩﺭﺝ‬‫ﺩﺍﺧﻝ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﺑﺣﻳﺙ‬‫ﻛﺎﻥ‬‫ﻳﺑﺩﺃ‬0‫ﻭﻳﻧﺗﻬﻲ‬256
،‫ﺳﻳﻧﻳﺎ‬‫ﻭﻳﺑﺩﺃ‬‫ﻭﻳﻧﺗﻬﻲ‬0‫ﺻﺎﺩﻳﺎ‬_^*...‫ﻭﺍﻟﻌﻛﺱ‬‫ﺻﺣﻳﺢ‬..

‫ﻣﺛﺎﻝ‬7-‫ﺏ‬:‫ﻻﺣﻅ‬‫ﺍﻟﺩﻭﺭ‬‫ﺍﻟﺗﻲ‬‫ﺗﻠﻌﺑﻪ‬‫ﺍﻟﻘﻳﻡ‬‫ﻟﺗﻐﻳﺭ‬‫ﺷﻛﻝ‬‫ﺍﻟﺗﺩﺭﺝ‬_^*

‫ﻣﺛﺎﻝ‬7-‫ﺝ‬:

،‫ﻭﺑﻬﺫﺍ‬‫ﻧﻛﻭﻥ‬‫ﺇﻧﺗﻬﻳﻧﺎ‬‫ﺑﻔﺿﻝ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬‫ﻣﻥ‬‫ﻫﺫﻩ‬‫ﺍﻟﺟﺯﺋﻳﺔ‬‫ﻭﻫﺫﺍ‬‫ﺍﻟﻣﻭﺿﻭﻉ‬
‫ﻣﻥ‬،‫ﺍﻟﺩﻭﺭﺓ‬‫ﻭﺍﻵﻥ‬‫ﺳﻧﻧﺗﻘﻝ‬‫ﻣﻌﺎ‬‫ﺑﺈﺫﻥ‬‫ﷲ‬‫ﺗﻌﺎﻟﻰ‬‫ﺍﻟﻰ‬‫ﺟﺯﺋﻳﺔ‬‫ﺟﺩﻳﺩﺓ‬
‫ﻭﻣﻭﺿﻭﻉ‬،‫ﺟﺩﻳﺩ‬‫ﻟﻛﻥ‬‫ﺃﻛﺭﺭ‬،‫ﻣﺟﺩﺩﺍ‬‫ﺍﻟﺗﻁﺑﻳﻖ‬‫ﻣﻬﻡ‬‫ﺟﺩﺍ‬‫ﺇﺫﺍ‬‫ﺭﻏﺑﺕ‬‫ﺑﺎﻟﺗﻌﻠﻡ‬
‫ﻭﺗﻁﻭﻳﺭ‬‫ﻣﻬﺎﺭﺍﺗﻙ‬..‫ﻁﺑﻖ‬،‫ﺍﻷﻣﺛﻠﺔ‬‫ﻭﺇﻥ‬‫ﻭﺍﺟﻬﺗﻙ‬‫ﺃﻱ‬‫ﻣﺷﻛﻠﺔ‬‫ﺇﺑﺣﺙ‬‫ﻭﺍﻗﺭﺃ‬
‫ﻭﺃﻋﺩ‬‫ﺍﻟﻛﺭﺓ‬‫ﺳﺗﻧﺟﺢ‬‫ﺑﻛﻝ‬‫ﺗﺄﻛﻳﺩ‬....‫ﻭﻣﻥ‬‫ﺑﺎﺏ‬‫ﺍﻟﺗﺭﻛﻳﺯ‬‫ﻋﻠﻰ‬‫ﺗﻁﻭﻳﺭ‬
،‫ﻣﻬﺎﺭﺍﺗﻛﻡ‬‫ﺃﺭﺟﻭﺍ‬‫ﻣﻧﻛﻡ‬‫ﺍﻹﻁﻼﻉ‬)‫ﺍﻟﺑﺣﺙ‬(‫ﻋﻥ‬‫ﺍﻟﺩﺍﻟﺔ‬:
createRadialGradient‫ﻷﻧﻧﺎ‬‫ﺳﻧﺳﺗﺧﺩﻣﻬﺎ‬‫ﻓﻲ‬‫ﺍﻟﻣﻭﺿﻭﻉ‬‫ﺍﻟﺟﺩﻳﺩ‬
‫ﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﻋﺭﺿﻬﺎ‬‫ﻓﻲ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﺭﻗﻡ‬7_^*:

‫ﻣﻥ‬ ‫ﻣﻧﻘﻭﻝ‬:‫ﺍﻟﻌﺛﻣﺎﻧﻳﺔ‬ ‫ﺍﻻﻣﺑﺭﺍﻁﻭﺭﻳﺔ‬Ottoman empire| |

Making Charts
‫ﻓﻲ‬‫ﻫﺫﺍ‬‫ﺍﻟﻔﺻﻝ‬‫ﺳﻧﺗﻌﻠﻡ‬‫ﻣﻌﺎ‬‫ﻛﻳﻑ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺭﺳﻡ‬‫ﺷﻛﻝ‬‫ﺃﻭ‬‫ﻣﺧﻁﻁ‬‫ﺑﻳﺎﻧﻲ‬‫ﻣﻥ‬
‫ﺧﻼﻝ‬‫ﻣﺎ‬‫ﺗﻌﻠﻣﻧﺎﻩ‬،‫ﺳﺎﺑﻘﺎ‬‫ﺑﺎﻹﺿﺎﻓﺔ‬‫ﺍﻟﻰ‬‫ﺑﻌﺽ‬‫ﺍﻟﺣﺭﻛﺎﺕ‬‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬
‫ﺍﻟﺑﺳﻳﻁﺔ‬‫ﻭﺍﻟﺗﻲ‬‫ﻧﻌﻠﻣﻬﺎ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﻣﻌﺭﻓﺗﻧﺎ‬‫ﻟﻠﺟﺎﻓﺎ‬،‫ﺳﻛﺭﺑﺕ‬‫ﻓﻣﺛﻼ‬‫ﻟﻭ‬
‫ﺇﺣﺗﺟﻧﺎ‬‫ﺍﻵﻥ‬‫ﻟﺭﺳﻡ‬‫ﻣﺧﻁﻁ‬‫ﺑﻳﺎﻧﻲ‬‫ﺑﺄﺑﺳﻁ‬‫ﺃﺷﻛﺎﻟﻪ‬‫ﻛﻣﺎ‬‫ﻳﻅﻬﺭ‬‫ﻓﻲ‬‫ﻫﺫﻩ‬
،‫ﺍﻟﺻﻭﺭﺓ‬‫ﻣﺎ‬‫ﻫﻲ‬‫ﺍﻟﺷﻳﻔﺭﺓ‬‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬‫ﺍﻟﺗﻲ‬‫ﺳﺗﻘﻭﻡ‬‫ﺑﻛﺗﺎﺑﺗﻬﺎ؟‬
‫ﻫﺫﻩ‬‫ﺍﻟﺭﺳﻣﺔ‬‫ﺍﻟﺑﺳﻳﻁﺔ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺗﻧﻔﻳﺫﻫﺎ‬‫ﺑﻛﻝ‬‫ﺑﺳﻁﺔ‬‫ﻣﻥ‬
‫ﺧﻼﻝ‬‫ﺟﻣﻠﺔ‬‫ﺩﻭﺭﺍﻥ‬‫ﻭﺍﺣﺩﺓ‬)‫ﺟﺎﻓﺎ‬‫ﺳﻛﺭﺑﺕ‬(‫ﺑﺎﻹﺿﺎﻓﺔ‬
‫ﺍﻟﻰ‬‫ﻣﺎ‬‫ﺗﻌﻠﻣﻧﺎﻩ‬‫ﺳﺎﺑﻘﺎ‬‫ﻓﻲ‬‫ﺍﻝ‬Canvas..‫ﻭﻟﻧﻔﺭﺽ‬
‫ﺃﻥ‬‫ﻫﺫﻩ‬‫ﻫﻲ‬‫ﺍﻟﻘﻳﻡ‬‫ﺍﻟﻣﺳﺗﺧﺩﻣﺔ‬16,68,20,30,54

Making Charts
‫ﻭﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﺍﻟﺷﻳﻔﺭﺓ‬‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬:
‫ﻛﻣﺎ‬‫ﺗﻼﺣﻅ‬‫ﻓﺈﻧﻧﻲ‬
‫ﻗﻣﺕ‬‫ﺑﺈﻧﺷﺎء‬‫ﻭﺭﺳﻡ‬
‫ﻫﺫﺍ‬‫ﺍﻟﺷﻛﻝ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬
‫ﺑﺷﻛﻠﻪ‬‫ﺍﻟﺫﻱ‬‫ﺗﺭﺍﻩ‬‫ﺑﻬﺫﻩ‬
‫ﺍﻷﺳﻁﺭ‬،‫ﺍﻟﻘﻠﻳﻠﺔ‬‫ﺍﻝ‬
Data‫ﺗﻣﺛﻝ‬‫ﻣﺟﻣﻭﻋﺔ‬
‫ﺍﻟﻘﻳﻡ‬‫ﻟﻠﻣﺳﺗﻁﻳﻼﺕ‬
‫ﺩﺍﺧﻝ‬‫ﺍﻟﺷﻛﻝ‬،‫ﺍﻟﺑﻳﺎﻧﻲ‬
‫ﻭﺳﺑﺏ‬‫ﻭﺟﻭﺩ‬‫ﻋﻣﻠﻳﺎﺕ‬
‫ﺍﻟﺿﺭﺏ‬)i*100(‫ﻭ‬
dp * 5‫ﻫﻭ‬‫ﺗﻧﺳﻳﻖ‬
‫ﺍﻟﺷﻛﻝ‬...‫ﻟﻛﻥ‬..

Making Charts
‫ﻟﻛﻥ‬‫ﻫﻧﺎﻙ‬‫ﻋﺩﺓ‬‫ﻣﺷﺎﻛﻝ‬‫ﻓﻲ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬،‫ﺍﻟﺳﺎﺑﻖ‬‫ﻭﻗﺑﻝ‬‫ﺍﻟﺑﺩء‬‫ﺑﺄﻭﻝ‬
‫ﻣﺷﻛﻠﺔ‬‫ﺃﻧﻭﻩ‬‫ﺃﻥ‬‫ﺍﻟﻌﻣﻠﻳﺎﺕ‬‫ﺍﻟﺗﻲ‬‫ﻗﻣﻧﺎ‬‫ﺑﻬﺎ‬‫ﻣﻥ‬‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬rect‫ﻫﻲ‬‫ﺑﻛﻝ‬
‫ﺑﺳﺎﻁﺔ‬‫ﻟﺗﻧﺳﻳﻖ‬،‫ﺍﻟﺷﻛﻝ‬‫ﻭﺇﻋﻁﺎﺋﻪ‬‫ﺷﻛﻼ‬،‫ﺣﻘﻳﻘﻳﺎ‬‫ﻟﻛﻥ‬‫ﻫﺫﺍ‬‫ﻻ‬‫ﻳﻌﻧﻲ‬‫ﺃﻥ‬
‫ﺍﻟﻘﻳﻡ‬،‫ﻋﺷﻭﺍﺋﻳﺔ‬‫ﺑﻝ‬‫ﺇﻥ‬‫ﺍﻟﻌﻣﻠﻳﺎﺕ‬‫ﺍﻟﺗﻲ‬‫ﺳﻧﻘﻭﻡ‬‫ﺑﺈﺳﺗﺧﺩﺍﻣﻬﺎ‬‫ﻫﻧﺎ‬‫ﺳﺗﺅﺛﺭ‬‫ﺑﻛﻝ‬
‫ﺗﺄﻛﻳﺩ‬‫ﻋﻠﻰ‬‫ﺷﻛﻝ‬،‫ﺍﻟﻣﺧﺭﺟﺎﺕ‬‫ﻭﺑﻬﺫﺍ‬‫ﻓﺈﻥ‬‫ﺃﻱ‬‫ﻋﻣﻠﻳﺔ‬‫ﻳﺟﺏ‬‫ﺃﻥ‬‫ﺗﺗﻧﺎﺳﺏ‬
‫ﺑﺷﻛﻝ‬‫ﺧﻁﻲ‬‫ﻣﻊ‬‫ﺟﻣﻳﻊ‬‫ﻣﺎ‬‫ﺳﻳﺗﻡ‬‫ﻋﻣﻠﻪ‬‫ﻻﺣﻘﺎ‬...)‫ﻓﻲ‬‫ﺧﺿﻡ‬‫ﺍﻟﺣﺎﻻﺕ‬‫ﺍﻟﺗﻲ‬
‫ﺳﻧﺗﻁﺭﻕ‬‫ﺍﻟﻳﻬﺎ‬‫ﻫﻧﺎ‬(..
‫ﻭﺍﻵﻥ‬‫ﺍﻟﻣﺷﻛﻠﺔ‬‫ﺍﻵﻭﻟﻰ‬‫ﺗﻛﻣﻥ‬‫ﻓﻲ‬‫ﺃﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬‫ﻳﺑﺩﺃ‬‫ﻣﻥ‬‫ﺍﻷﻋﻠﻰ‬‫ﺍﻟﻰ‬
،‫ﺍﻷﺳﻔﻝ‬‫ﻭﻫﺫﺍ‬‫ﺍﻷﻣﺭ‬،‫ﻁﺑﻳﻌﻲ‬‫ﻷﻧﻧﺎ‬‫ﺗﺣﺩﺛﻧﺎ‬‫ﻓﻲ‬‫ﺑﺩﺍﻳﺔ‬‫ﺍﻟﺩﻭﺭﺓ‬‫ﺃﻥ‬‫ﺍﻝ‬
Canvas‫ﻳﻌﺗﻣﺩ‬‫ﺃﻋﻠﻰ‬‫ﻳﺳﺎﺭﻩ‬‫ﻛﻧﻘﻁﺔ‬‫ﺇﻧﻁﻼﻕ‬‫ﺍﻟﺭﺳﻡ‬_^*،‫ﻭﺍﻵﻥ‬‫ﻛﻳﻑ‬
‫ﻳﻣﻛﻧﻧﺎ‬‫ﺣﻝ‬‫ﻫﺫﻩ‬‫ﺍﻟﻣﺷﻛﻠﺔ؟‬

Making Charts
‫ﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬:
‫ﻻﺣﻅ‬،‫ﺍﻟﻣﺛﺎﻝ‬‫ﻭﻻﺣﻅ‬‫ﺃﻥ‬‫ﺍﻟﺗﻐﻳﻳﺭ‬‫ﺣﺩﺙ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺗﻐﻳﻳﺭ‬‫ﻗﻳﻣﺔ‬)Y(،‫ﻭﻳﺗﻡ‬
‫ﺫﻟﻙ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺣﺳﺎﺏ‬‫ﺇﺭﺗﻔﺎﻉ‬‫ﺍﻝ‬canvas‫ﻭﻫﻭ‬500‫ﻣﻁﺭﻭﺣﺎ‬‫ﻣﻧﻪ‬

Making Charts
‫ﺇﺭﺗﻔﺎﻉ‬‫ﺍﻟﻌﺎﻣﻭﺩ‬‫ﻭﻫﻭ‬‫ﻫﻧﺎ‬)dp * 5(‫ﻣﻁﺭﻭﺣﺎ‬‫ﻣﻧﻪ‬‫ﺃﻳﺿﺎ‬‫ﻗﻳﻣﺔ‬‫ﺃﺧﺭﻯ‬
‫ﺇﺿﺎﻓﻳﺔ‬‫ﻭﻫﻲ‬30‫ﻭﺗﻣﺛﻝ‬‫ﻫﺫﻩ‬‫ﻗﻳﻣﺔ‬‫ﺗﻧﺳﻳﻘﻳﺔ‬،‫ﻓﻘﻁ‬‫ﺑﺣﻳﺙ‬‫ﻟﻭ‬‫ﺗﺭﻛﺕ‬0‫ﻓﻲ‬
‫ﺍﻟﻣﺛﺎﻝ‬‫ﺍﻟﺳﺎﺑﻖ‬‫ﺳﺗﺑﺩﺃ‬‫ﺍﻷﻋﻣﺩﺓ‬‫ﻣﻥ‬‫ﺍﻟﺧﻁ‬‫ﺍﻟﺳﻔﻠﻲ‬‫ﻟﻝ‬canvas..._^*
‫ﻭﺍﻵﻥ‬‫ﺑﻌﺩ‬‫ﺍﻹﻧﺗﻬﺎء‬‫ﻣﻥ‬‫ﺣﻝ‬‫ﺍﻟﻣﺷﻛﻠﺔ‬‫ﺍﻷﻭﻟﻰ‬‫ﻧﻧﺗﻘﻝ‬‫ﺍﻟﻰ‬‫ﺍﻟﻣﺷﻛﻠﺔ‬‫ﺍﻟﺛﺎﻧﻳﺔ‬
‫ﻭﻫﻲ‬‫ﺃﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬‫ﻳﻭﺟﺩ‬‫ﻟﻪ‬‫ﺧﻁﻭﻁ‬‫ﻭﻋﻧﺎﻭﻳﻥ‬‫ﺑﺣﻳﺙ‬‫ﺗﻣﺛﻝ‬‫ﺍﻟﻘﻳﻡ‬‫ﻟﻛﻝ‬
‫ﻋﺎﻣﻭﺩ‬،‫ﺑﻳﺎﻧﻲ‬‫ﻭﺗﻣﺛﻝ‬‫ﻣﺎﻫﻳﺔ‬‫ﻫﺫﺍ‬‫ﺍﻟﻌﺎﻣﻭﺩ‬..‫ﻭﻫﺫﺍ‬‫ﺍﻷﻣﺭ‬‫ﻳﻣﻛﻥ‬‫ﺣﻠﻪ‬‫ﺃﻳﺿﺎ‬
‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻟﺭﺳﻡ‬_^*..‫ﻟﻧﺷﺎﻫﺩ‬‫ﺫﻟﻙ‬‫ﻣﻌﺎ‬^_^

Making
Charts
‫ﻣﺛﺎﻝ‬:
‫ﺷﻳﺋﺎ‬ ‫ﻳﺗﺿﺢ‬ ‫ﺑﺩء‬ ‫ﺍﻟﺑﻳﺎﻧﻲ‬ ‫ﺍﻟﺭﺳﻡ‬ ‫ﺃﻥ‬ ‫ﻛﻳﻑ‬ ‫ﺍﻟﻣﺛﺎﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻓﻲ‬ ‫ﻻﺣﻅ‬
‫ﺃﻋﻣﺩﺓ‬ ‫ﺃﻥ‬ ‫ﻭﻫﻲ‬ ،‫ﺃﻳﺿﺎ‬ ‫ﻣﺷﻛﻠﺔ‬ ‫ﻓﻳﻪ‬ ‫ﺍﻟﺷﻛﻝ‬ ‫ﻫﺫﺍ‬ ‫ﻟﻛﻥ‬ ،‫ﻓﺷﻳﺋﺎ‬
‫ﻟﺫﻟﻙ‬ ،‫ﺍﻟﺑﻳﺎﻧﻲ‬ ‫ﻟﻠﺭﺳﻡ‬ ‫ﺍﻟﻣﺣﻭﺭ‬ ‫ﺧﻁﻭﻁ‬ ‫ﺃﺳﻔﻝ‬ ‫ﺧﺎﺭﺟﺔ‬ ‫ﺍﻟﺑﻳﺎﻥ‬
‫ﻣﻧﻬﺎ‬ ‫ﻟﻧﺗﺧﻠﺹ‬ ‫ﻣﺛﺎﻻ‬ ‫ﻟﻧﺷﺎﻫﺩ‬:P..

Making Charts
‫ﻣﺛﺎﻝ‬:
‫ﻻﺣﻅ‬‫ﻓﻲ‬‫ﻫﺫﺍ‬‫ﺍﻟﻣﺛﺎﻝ‬‫ﺃﻥ‬‫ﺍﻟﺗﻐﻳﻳﺭ‬‫ﻛﺎﻥ‬
‫ﻋﻠﻰ‬‫ﺳﻁﺭ‬،‫ﻭﺍﺣﺩ‬‫ﻭﻫﻭ‬‫ﺍﻟﺳﻁﺭ‬‫ﺍﻟﺧﺎﺹ‬
‫ﺑﺭﺳﻡ‬،‫ﺍﻷﻋﻣﺩﺓ‬‫ﻓﻘﻁ‬‫ﻗﻣﻧﺎ‬‫ﺑﺎﻟﺗﻌﺩﻳﻝ‬‫ﻋﻠﻳﻪ‬
‫ﻟﺗﺑﺩﺃ‬‫ﺍﻷﻋﻣﺩﺓ‬‫ﻣﻥ‬‫ﻧﻘﺎﻁ‬‫ﻣﺧﺗﻠﻔﺔ‬^^
‫ﻣﻼﺣﻅﺔ‬:‫ﺍﻟﻘﻳﻡ‬‫ﺍﻟﺗﻲ‬‫ﺗﻡ‬‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬‫ﺑﺎﻷﻣﺛﻠﺔ‬‫ﻟﺗﻣﺛﻳﻝ‬‫ﻋﻧﺎﻭﻳﻥ‬
‫ﺍﻷﻋﻣﺩﺓ‬‫ﻏﻳﺭ‬،‫ﺩﻗﻳﻘﺔ‬‫ﺍﻟﻬﺩﻑ‬‫ﻣﻧﻬﺎ‬‫ﻓﻘﻁ‬‫ﺗﻭﺿﻳﺢ‬‫ﻭﺑﻧﺎء‬‫ﺍﻟﻣﺛﺎﻝ‬...

Making Charts
‫ﻭﺍﻵﻥ‬‫ﻣﺎﺫﺍ‬‫ﻋﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺑﻳﺎﻧﻲ‬‫ﺍﻟﺩﺍﺋﺭﻱ‬)Piechart(‫؟‬
‫ﻫﻝ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺭﺳﻣﻪ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬canvas‫؟‬
‫ﺍﻟﺟﻭﺍﺏ‬‫ﺑﻛﻝ‬‫ﺗﺄﻛﻳﺩ‬،‫ﻧﻌﻡ‬‫ﻟﻧﺄﺧﺫ‬‫ﻣﺛﺎﻻ‬‫ﺳﺭﻳﻌﺎ‬‫ﻋﻠﻰ‬‫ﺫﻟﻙ‬_^*
‫ﺍﻟﺧﻁﻭﺍﺕ‬)‫ﺳﻧﻌﺗﻣﺩ‬‫ﻋﻠﻰ‬‫ﺍﻟﻘﻳﻡ‬‫ﺍﻟﺗﻲ‬‫ﺇﺳﺗﺧﺩﻣﻧﺎﻫﺎ‬‫ﻓﻲ‬‫ﺍﻷﻣﺛﻠﺔ‬‫ﺍﻟﺳﺎﺑﻘﺔ‬(:
1(‫ﺳﻧﻘﻭﻡ‬‫ﺑﺈﺿﺎﻓﺔ‬‫ﻣﺻﻔﻭﻓﺔ‬‫ﺗﺣﺗﻭﻱ‬‫ﻣﺟﻣﻭﻋﺔ‬‫ﻣﻥ‬‫ﺍﻷﻟﻭﺍﻥ‬‫ﻟﻛﻝ‬‫ﻗﻳﻣﺔ‬–
‫ﻭﻫﺫﺍ‬‫ﻳﻌﻧﻲ‬‫ﺃﻥ‬‫ﻛﻝ‬‫ﻟﻭﻥ‬‫ﺳﻳﻣﺛﻝ‬‫ﻫﺫﻩ‬‫ﺍﻟﻘﻳﻣﺔ‬–

Making Charts
2(‫ﺳﻧﻘﻭﻡ‬‫ﺑﺣﺳﺎﺏ‬‫ﻣﺟﻣﻭﻉ‬‫ﺟﻣﻳﻊ‬‫ﺍﻟﻘﻳﻡ‬‫ﺍﻟﻣﻭﺟﻭﺩﺓ‬‫ﻟﺩﻳﻧﺎ‬:
3(‫ﺍﻵﻥ‬‫ﻳﺟﺏ‬‫ﻋﻠﻳﻧﺎ‬‫ﺗﺣﺩﻳﺩ‬‫ﻣﺭﻛﺯ‬،‫ﺍﻟﺩﺍﺋﺭﺓ‬‫ﻭﺳﻧﻔﺭﺽ‬‫ﺃﻥ‬‫ﻣﺭﻛﺯ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬
‫ﺳﻳﻛﻭﻥ‬‫ﻓﻲ‬‫ﺍﻟﻧﻘﻁﺔ‬250,250‫ﺃﻱ‬‫ﻓﻲ‬‫ﻣﻧﺗﺻﻑ‬‫ﺍﻝ‬canvas،
‫ﺑﻌﺩ‬‫ﺫﻟﻙ‬‫ﺳﻧﻘﻭﻡ‬‫ﺑﺣﺳﺎﺏ‬‫ﺍﻟﺯﺍﻭﻳﺔ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﻛﻝ‬،‫ﻗﻳﻣﺔ‬‫ﻭﻣﻥ‬‫ﺛﻡ‬‫ﺭﺳﻣﻬﺎ‬
‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬arc،‫ﻭﺣﺗﻰ‬‫ﻳﺗﻡ‬‫ﺍﻹﻧﺗﻘﺎﻝ‬‫ﻣﻥ‬‫ﻗﻭﺱ‬‫ﺍﻟﻰ‬‫ﺁﺧﺭ‬)‫ﻣﻥ‬‫ﻣﻧﺣﻧﻰ‬‫ﺃﻭ‬
‫ﺯﺍﻭﻳﺔ‬‫ﺍﻟﻰ‬‫ﺃﺧﺭﻯ‬‫ﺑﻌﺩ‬‫ﺍﻹﻧﺗﻬﺎء‬‫ﻣﻥ‬‫ﺭﺳﻣﻬﺎ‬‫ﻧﺣﻔﻅ‬‫ﻗﻳﻣﺔ‬‫ﺍﻟﻘﻭﺱ‬‫ﺍﻟﺳﺎﺑﻖ‬..(

Making Charts
‫ﻟﻳﺻﺑﺢ‬‫ﻟﺩﻳﻧﺎ‬
‫ﻫﺫﻩ‬‫ﺍﻟﺷﻳﻔﺭﺓ‬
‫ﺍﻟﺑﺭﻣﺟﻳﺔ‬:

Making Charts
‫ﺍﻟﺩﺍﻟﺔ‬arc:‫ﺗﺳﺗﺧﺩﻡ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﻓﻲ‬‫ﺍﻝ‬canvas‫ﻟﺭﺳﻡ‬‫ﺃﻗﻭﺍﺱ‬‫ﺃﻭ‬
‫ﻣﻧﺣﻧﻳﺎﺕ‬)‫ﻭﺍﻟﺗﻲ‬‫ﺗﺳﺗﺧﺩﻡ‬‫ﻟﺭﺳﻡ‬‫ﺍﻟﺩﻭﺍﺋﺭ‬‫ﺃﻭ‬‫ﺃﺟﺯﺍء‬‫ﻣﻥ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬(
‫ﺍﻟﺻﻳﻐﺔ‬‫ﺍﻟﻌﺎﻣﺔ‬‫ﻟﻬﺫﻩ‬‫ﺍﻟﺩﺍﻟﺔ‬‫ﻫﻲ‬:
‫ﺍﻝ‬x:‫ﺗﻣﺛﻝ‬‫ﺍﻟﻘﻳﻣﺔ‬‫ﺍﻟﻣﺣﻭﺭ‬‫ﺍﻟﺳﻳﻧﻲ‬‫ﻟﻣﺭﻛﺯ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬.
‫ﺍﻝ‬y:‫ﺗﻣﺛﻝ‬‫ﺍﻟﻘﻳﻣﺔ‬‫ﺍﻟﻣﺣﻭﺭ‬‫ﺍﻟﺻﺎﺩﻱ‬‫ﻟﻣﺭﻛﺯ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬.
‫ﺍﻝ‬r:‫ﺗﻣﺛﻝ‬‫ﻧﺻﻑ‬‫ﻗﻁﺭ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬.
‫ﺍﻝ‬sAngle:‫ﺗﻣﺛﻝ‬‫ﺍﻟﺯﺍﻭﻳﺔ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﺑﺩﺃ‬‫ﺍﻟﺭﺳﻡ‬‫ﻟﻠﻣﻧﺣﻧﻰ‬‫ﺃﻭ‬‫ﺍﻟﻘﻭﺱ‬.
‫ﺍﻝ‬eAngle:‫ﺗﻣﺛﻝ‬‫ﻧﻘﻁﺔ‬‫ﺇﻧﺗﻬﺎء‬‫ﺍﻟﺭﺳﻡ‬‫ﺍﻟﺧﺎﺻﺔ‬‫ﺑﺎﻟﺯﺍﻭﻳﺔ‬.
‫ﺍﻝ‬counterclockwise:‫ﻗﻳﻣﺔ‬‫ﺇﺧﺗﻳﺎﺭﻳﺔ‬‫ﻗﻳﻣﺗﻬﺎ‬‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬false‫ﺃﻱ‬
‫ﺃﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﺳﻳﻛﻭﻥ‬‫ﻣﻊ‬‫ﻋﻘﺎﺭﺏ‬،‫ﺍﻟﺳﺎﻋﺔ‬true‫ﺗﻌﻧﻲ‬‫ﺍﻟﺭﺳﻡ‬‫ﻋﻛﺱ‬‫ﻋﻘﺎﺭﺏ‬
‫ﺍﻟﺳﺎﻋﺔ‬..

Making Charts
‫ﻣﻼﺣﻅﺔ‬:‫ﻟﺭﺳﻡ‬‫ﺩﺍﺋﺭﺓ‬‫ﻛﺎﻣﻠﺔ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﺍﻝ‬arc‫ﻗﻡ‬‫ﺑﺟﻌﻝ‬‫ﺍﻝ‬sAngle
‫ﻳﺳﺎﻭﻱ‬0‫ﻭﺍﻝ‬eAngle‫ﻳﺳﺎﻭﻱ‬2* 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:‫ﺗﺷﻳﺭ‬‫ﺍﻟﻰ‬‫ﻣﻘﺩﺍﺭ‬‫ﺍﻟﺷﻔﺎﻓﻳﺔ‬‫ﻟﻠﺻﻭﺭﺓ‬‫ﻭﺗﻛﻭﻥ‬‫ﻫﺫﻩ‬‫ﺍﻟﻘﻳﻣﺔ‬
‫ﺑﻳﻥ‬0.0)‫ﺷﻔﺎﻓﺔ‬‫ﺗﻣﺎﻣﺎ‬(‫ﻭﺍﻝ‬1.0)‫ﺍﻟﻘﻳﻣﺔ‬‫ﺍﻹﻓﺗﺭﺍﺿﻳﺔ‬–‫ﺑﺩﻭﻥ‬
‫ﺷﻔﺎﻓﻳﺔ‬(..‫ﻭﺍﻵﻥ‬‫ﻟﻧﺷﺎﻫﺩ‬‫ﻣﺛﺎﻻ‬^_*

Opacity
‫ﻣﺛﺎﻝ‬:
‫ﻻﺣﻅ‬‫ﻫﻧﺎ‬‫ﺃﻥ‬‫ﻛﻝ‬‫ﻣﺭﺑﻊ‬‫ﺗﺧﺗﻠﻑ‬‫ﺩﺭﺟﺔ‬،‫ﺷﻔﺎﻓﻳﺗﻪ‬‫ﺑﺣﻳﺙ‬‫ﺗﻘﻝ‬‫ﺷﻔﺎﻓﻳﺔ‬
‫ﺍﻟﻣﺭﺑﻊ‬‫ﻛﻠﻣﺎ‬‫ﺇﻗﺗﺭﺑﻧﺎ‬‫ﻣﻥ‬‫ﺍﻟﺻﻔﺭ‬_^*

Transforms
‫ﻣﻌﻅﻡ‬‫ﻣﻁﻭﺭﻳﻥ‬‫ﺍﻟﻭﻳﺏ‬‫ﻋﻣﻠﻭﺍ‬‫ﺃﻭ‬‫ﺷﺎﻫﺩﻭﺍ‬‫ﺳﺎﺑﻘﺎ‬‫ﻋﻠﻰ‬‫ﺍﻝ‬CSS3،
‫ﻭﺷﺎﻫﺩﻭﺍ‬‫ﺍﻟﺧﺻﺎﺋﺹ‬‫ﺍﻟﺗﻲ‬‫ﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻣﻬﺎ‬‫ﻣﻥ‬‫ﺧﻼﻝ‬‫ﻭﺟﻭﺩ‬‫ﺍﻝ‬
Transforms،‫ﻭﻫﻧﺎ‬‫ﺑﻧﻔﺱ‬‫ﺍﻟﻣﻔﻬﻭﻡ‬–‫ﺗﻘﺭﻳﺑﺎ‬–‫ﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﺍﻝ‬
‫ﺍﻝ‬Transforms‫ﺩﺍﺧﻝ‬‫ﺍﻝ‬Canvas،‫ﻭﻳﻛﻭﻥ‬‫ﺍﻟﺭﺳﻡ‬‫ﻷﻱ‬‫ﺧﺎﺻﻳﺔ‬
‫ﺧﺎﺻﺔ‬‫ﺑﻬﺎ‬2D_^*،‫ﻭﻟﻣﻥ‬‫ﻻ‬‫ﻳﻌﺭﻑ‬‫ﻋﻥ‬‫ﺍﻝ‬Transforms‫ﻓﻬﻲ‬
‫ﺧﺎﺻﻳﺔ‬‫ﺗﺗﻳﺢ‬‫ﻟﻙ‬‫ﻋﻣﻝ‬‫ﻧﻘﻝ‬‫ﻟﻌﻧﺻﺭ‬‫ﻣﺎ‬‫ﻣﻥ‬‫ﻣﻭﻗﻊ‬‫ﺍﻟﻰ‬،‫ﺁﺧﺭ‬‫ﺗﺣﺭﻳﻙ‬
‫ﺍﻟﻌﻧﺻﺭ‬‫ﻭﺗﻛﺑﻳﺭ‬‫ﺍﻟﻌﻧﺻﺭ‬...‫ﺍﻟﺦ‬
‫ﻭﻳﻣﻛﻧﻧﺎ‬‫ﺇﺳﺗﺧﺩﺍﻡ‬‫ﻫﺫﻩ‬‫ﺍﻟﺩﻭﺍﻝ‬‫ﺃﺛﻧﺎء‬‫ﺍﻟﻌﻣﻝ‬‫ﻋﻠﻰ‬‫ﺍﻝ‬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‫ﺍﻟﺯﺍﻭﻳﺔ‬،‫ﺍﻟﻣﻁﻠﻭﺑﺔ‬‫ﻭﻣﻥ‬‫ﺛﻡ‬‫ﻧﺿﺭﺑﻬﺎ‬‫ﺏ‬‫ﺍﻟﺛﺎﺑﺕ‬)‫ﺑﺎﻱ‬–
‫ﻭﻫﻭ‬‫ﻳﺷﻳﺭ‬‫ﺍﻟﻰ‬‫ﺍﻟﻧﺳﺑﺔ‬‫ﺑﻳﻥ‬‫ﻣﺣﻳﻁ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬‫ﻭﻗﻁﺭﻫﺎ‬(،‫ﻭﺑﻣﻌﻧﻰ‬‫ﺁﺧﺭ‬
‫ﺗﺧﻳﻝ‬‫ﺃﻧﻙ‬‫ﺗﺭﺳﻡ‬‫ﺩﺍﺋﺭﺓ‬‫ﻭﺑﺩﺍﺧﻠﻬﺎ‬‫ﺭﺳﻣﺔ‬،‫ﻣﻌﻳﻧﺔ‬‫ﻭﻣﻥ‬‫ﺛﻡ‬‫ﻧﻘﻭﻡ‬‫ﺑﺗﺣﺭﻙ‬
‫ﻫﺫﻩ‬‫ﺍﻟﺭﺳﻣﺔ‬‫ﺩﺍﺧﻝ‬‫ﺍﻟﺩﺍﺋﺭﺓ‬...‫ﻭﺍﻵﻥ‬‫ﺷﺎﻫﺩ‬‫ﺍﻟﻣﺛﺎﻝ‬:

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

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

More from anees abu-hmaid

More from anees abu-hmaid (18)

Recently uploaded

Recently uploaded (6)

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