کتاب صوتی خلق جلوه‌های بصری پویا و بازی‌های تعاملی با Foundation HTML5 Canvas

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب خلق جلوه‌های بصری پویا و بازی‌های تعاملی با Foundation HTML5 Canvas

موضوع کلی: توسعه وب فرانت‌اند

موضوع میانی: مبانی و کاربردهای Canvas در HTML5

📋 سرفصل‌های کتاب (100 موضوع)

• 1. معرفی Canvas و جایگاه آن در توسعه وب
• 2. تاریخچه و تکامل Canvas در HTML5
• 3. نصب و راه‌اندازی محیط توسعه برای Canvas
• 4. اولین گام: اضافه کردن تگ Canvas به HTML
• 5. دریافت Context دو‌بعدی و شروع کار
• 6. آشنایی با سیستم مختصات Canvas
• 7. ابعاد Canvas: تعیین عرض، ارتفاع و تراکم پیکسلی
• 8. ترسیم مستطیل پر شده: متد fillRect()
• 9. ترسیم مستطیل با خط دور: متد strokeRect()
• 10. پاک کردن بخش‌هایی از Canvas: متد clearRect()
• 11. تنظیم رنگ پر کردن اشکال: fillStyle
• 12. تنظیم رنگ خط دور اشکال: strokeStyle
• 13. تنظیم ضخامت خطوط: lineWidth
• 14. شروع یک مسیر جدید: beginPath()
• 15. پایان مسیر و ترسیم: closePath(), stroke(), fill()
• 16. رسم خطوط با moveTo() و lineTo()
• 17. ترسیم چندضلعی‌های ساده
• 18. استایل انتهای خطوط: lineCap (butt, round, square)
• 19. استایل اتصال خطوط: lineJoin (miter, round, bevel)
• 20. محدودیت طول میتر در lineJoin: miterLimit
• 21. ایجاد خط‌چین با setLineDash()
• 22. الگوهای خط‌چین و تنظیم آفست
• 23. ترسیم دایره و کمان با متد arc()
• 24. ترسیم کمان با متد arcTo()
• 25. درک تفاوت‌ها و کاربردهای arc() و arcTo()
• 26. ترسیم منحنی‌های Quadratic Bezier: quadraticCurveTo()
• 27. ترسیم منحنی‌های Cubic Bezier: bezierCurveTo()
• 28. ساخت اشکال پیچیده با ترکیب مسیرها
• 29. استفاده از متد rect() برای تعریف اشکال و سپس پر/خط‌کشی
• 30. تنظیم فونت متن: خصوصیت font
• 31. پر کردن متن: متد fillText()
• 32. خط‌کشی دور متن: متد strokeText()
• 33. تراز افقی متن: textAlign (start, end, left, right, center)
• 34. تراز عمودی متن: textBaseline (alphabetic, top, hanging, middle, ideographic, bottom)
• 35. اندازه‌گیری ابعاد متن: متد measureText()
• 36. ایجاد جلوه‌های متنی خلاقانه و پویا
• 37. استفاده از رنگ‌های ساده (نام، هگزا، RGB, RGBA)
• 38. ایجاد گرادیان خطی: createLinearGradient()
• 39. اعمال گرادیان خطی به اشکال
• 40. ایجاد گرادیان شعاعی: createRadialGradient()
• 41. اعمال گرادیان شعاعی به اشکال
• 42. ایجاد الگو از تصاویر: createPattern()
• 43. استفاده از الگوها برای پر کردن و خط‌کشی
• 44. کنترل تکرار الگوها (repeat, repeat-x, repeat-y, no-repeat)
• 45. فعال‌سازی و تنظیم رنگ سایه: shadowColor
• 46. تنظیم میزان تاری سایه: shadowBlur
• 47. تنظیم افست افقی سایه: shadowOffsetX
• 48. تنظیم افست عمودی سایه: shadowOffsetY
• 49. ایجاد جلوه‌های عمق و برجستگی با سایه‌ها
• 50. جابجایی مبدأ مختصات: متد translate()
• 51. چرخش Canvas: متد rotate()
• 52. مقیاس‌بندی Canvas: متد scale()
• 53. ذخیره و بازیابی حالت Canvas: save() و restore()
• 54. ترکیب تبدیل‌های هندسی برای ایجاد صحنه‌های پیچیده
• 55. تبدیل سفارشی با setTransform()
• 56. اعمال تبدیل به صورت افزایشی: transform()
• 57. بازگرداندن تبدیل‌ها به حالت اولیه: resetTransform()
• 58. بارگذاری تصاویر در Canvas: شیء Image و رویداد onload
• 59. ترسیم تصویر کامل: drawImage() با سه پارامتر
• 60. ترسیم بخشی از تصویر (برش): drawImage() با پنج پارامتر
• 61. ترسیم و مقیاس‌بندی تصویر: drawImage() با نه پارامتر
• 62. استفاده از ویدئو به عنوان منبع ترسیم
• 63. استخراج فریم‌های ویدئو و ترسیم در Canvas
• 64. ساخت افکت‌های ویدئویی زنده با Canvas
• 65. خواندن داده‌های پیکسلی تصویر: getImageData()
• 66. نوشتن داده‌های پیکسلی به Canvas: putImageData()
• 67. ایجاد تصاویر جدید از آرایه‌های پیکسلی
• 68. اعمال فیلتر خاکستری (Grayscale) به تصویر
• 69. اعمال فیلتر سپیا (Sepia) به تصویر
• 70. اعمال فیلتر وارونگی رنگ (Invert Color)
• 71. ساخت فیلترهای رنگی سفارشی پیشرفته
• 72. دستکاری کانال آلفا (شفافیت) در سطح پیکسل
• 73. مفهوم انیمیشن و توهم حرکت در کامپیوتر
• 74. ساختار حلقه بازی (Game Loop) برای انیمیشن
• 75. استفاده از requestAnimationFrame برای بهینه‌سازی انیمیشن
• 76. تفاوت requestAnimationFrame با setTimeout و setInterval
• 77. تکنیک‌های پاک کردن Canvas برای هر فریم: clearRect() و redraw
• 78. محاسبه زمان دلتا (Delta Time) برای حرکت روان و مستقل از فریم‌ریت
• 79. متحرک‌سازی یک شیء ساده (مثلاً یک توپ متحرک)
• 80. اعمال سرعت، شتاب و قوانین فیزیک ساده
• 81. انیمیشن با استفاده از توابع سینوسی و کسینوسی
• 82. ساخت کلاس‌ها و اشیاء برای مدیریت عناصر متحرک
• 83. ردیابی مختصات ماوس در Canvas: رویداد mousemove
• 84. واکنش به کلیک‌ها و لمس‌ها: رویداد mousedown, mouseup, click
• 85. پیاده‌سازی قابلیت کشیدن و رها کردن (Drag & Drop)
• 86. کنترل ورودی از طریق صفحه‌کلید: رویداد keydown و keyup
• 87. ساخت سیستم کنترل شخصیت با صفحه‌کلید
• 88. کار با رویدادهای لمسی (touchstart, touchmove, touchend) برای دستگاه‌های موبایل
• 89. تشخیص برخورد (Hit Testing) با اشکال مستطیلی
• 90. تشخیص برخورد (Collision Detection) دایره با دایره
• 91. ترکیب‌بندی تصاویر با globalCompositeOperation
• 92. ایجاد مناطق برش (Clipping Paths) برای ماسک کردن محتوا
• 93. استفاده از Canvasهای Off-screen برای رندرینگ پنهان و بهبود پرفورمنس
• 94. مدیریت و پیش‌بارگذاری منابع (تصاویر، صداها) به صورت بهینه
• 95. تکنیک‌های بهینه‌سازی رندرینگ Canvas برای بازی‌ها و اپلیکیشن‌های پیچیده
• 96. جلوگیری از لرزش (Jitter) و پرش در انیمیشن‌های فریم‌محور
• 97. مدیریت حافظه و اجتناب از نشت حافظه در Canvas
• 98. استفاده از Typed Arrays برای دستکاری سریع‌تر داده‌های پیکسلی
• 99. معرفی مفاهیم اولیه WebGL و تفاوت آن با Canvas 2D
• 100. جمع‌بندی دوره و راهنمایی برای ساخت پروژه‌های نهایی