آموزش HTML5 Canvas Ultimate Guide

سرفصل ها و درس ها

معرفی Introduction

معرفی Introduction

• راه اندازی محیط کار Setting up the working environment

• راه اندازی محیط کار Setting up the working environment

• بوم چیست؟ What is Canvas?

• بوم چیست؟ What is Canvas?

• سلام دنیا! Hello World!

• سلام دنیا! Hello World!

ترسیم خطوط و مسیرها روی بوم Drawing Lines and Paths on Canvas

• خط می پیوندد Line Joins

• ترسیم منحنی های Bezier Drawing Bezier Curves

• جلسه آزمایشگاه: ترسیم یک قلب Lab Session: Drawing a Heart

ترسیم خطوط و مسیرها روی بوم Drawing Lines and Paths on Canvas

• رسم خطوط Draw Lines

• رسم خطوط Draw Lines

• ترسیم خطوط پیچیده Drawing Complex Lines

• ترسیم خطوط پیچیده Drawing Complex Lines

• کلاه های خط Line Caps

• کلاه های خط Line Caps

• خط می پیوندد Line Joins

• سایه ها Shadows

• سایه ها Shadows

• جلسه آزمایشگاه: ترسیم اشکال پیچیده Lab Session: Drawing Complex Shapes

• جلسه آزمایشگاه: ترسیم اشکال پیچیده Lab Session: Drawing Complex Shapes

• ترسیم منحنی ها Drawing Curves

• ترسیم منحنی ها Drawing Curves

• ترسیم منحنی های درجه دوم Drawing Quadratic Curves

• ترسیم منحنی های درجه دوم Drawing Quadratic Curves

• ترسیم منحنی های Bezier Drawing Bezier Curves

• جلسه آزمایشگاه: ترسیم یک قلب Lab Session: Drawing a Heart

طراحی اشکال روی بوم Drawing Shapes on Canvas

• رسم مستطیل Drawing Rectangles

• جلسه آزمایشگاه: کشیدن صفحه شطرنج Lab Session: Drawing a Chessboard

• جلسه آزمایشگاه: ترسیم یک Pac-Man Lab Session: Drawing a Pac-Man

• سایه ها روی اشکال Shadows on Shapes

طراحی اشکال روی بوم Drawing Shapes on Canvas

• رسم مستطیل Drawing Rectangles

• جلسه آزمایشگاه: کشیدن صفحه شطرنج Lab Session: Drawing a Chessboard

• رسم دایره ها Drawing Circles

• رسم دایره ها Drawing Circles

• جلسه آزمایشگاه: ترسیم یک Pac-Man Lab Session: Drawing a Pac-Man

• جلسه آزمایشگاه: ترسیم چند ضلعی Lab Session: Drawing Polygons

• جلسه آزمایشگاه: ترسیم چند ضلعی Lab Session: Drawing Polygons

• سایه ها روی اشکال Shadows on Shapes

طراحی متون روی بوم Drawing Texts on Canvas

• ترسیم متون پایه Drawing Basic Texts

• جلسه آزمایشگاه: ترسیم متون سه بعدی Lab Session: Drawing 3D Texts

طراحی متون روی بوم Drawing Texts on Canvas

• ترسیم متون پایه Drawing Basic Texts

• متون استایل دهی Styling Texts

• متون استایل دهی Styling Texts

• جلسه آزمایشگاه: ترسیم متون سه بعدی Lab Session: Drawing 3D Texts

• متون موقعیت یابی Positioning Texts

• متون موقعیت یابی Positioning Texts

• سایه های روی متون Shadows on Texts

• سایه های روی متون Shadows on Texts

پروژه: ساختن یک کتابخانه نمودار نواری متن باز Project : Building a Open Source Bar Chart Library

• ایجاد ساختار پروژه Creating Project Structure

• ایجاد بوم و انجام پیش عملیات Creating the Canvas and Performing the Pre-Operations

• محورهای ترسیمی Drawing Axes

پروژه: ساختن یک کتابخانه نمودار نواری متن باز Project : Building a Open Source Bar Chart Library

• ایجاد ساختار پروژه Creating Project Structure

• ایجاد ساختار پروژه Creating Project Structure

• ایجاد تنظیمات نمودار Creating the Chart Configurations

• ایجاد تنظیمات نمودار Creating the Chart Configurations

• ایجاد بوم و انجام پیش عملیات Creating the Canvas and Performing the Pre-Operations

• محورهای ترسیمی Drawing Axes

• طراحی برچسب ها Drawing Labels

• طراحی برچسب ها Drawing Labels

• دستورالعمل های ترسیم Drawing Guidelines

• دستورالعمل های ترسیم Drawing Guidelines

• میله های طراحی Drawing Bars

• میله های طراحی Drawing Bars

• فشار دادن به GitHub Pushing to GitHub

• فشار دادن به GitHub Pushing to GitHub

• Readme.md Readme.md

• Readme.md Readme.md

طراحی تصاویر روی بوم Drawing Images on Canvas

• جلسه آزمایشگاه: طراحی شخصیت های پوکمون از یک کاشی Lab Session: Drawing Pokemon Characters From A Tile

• جلسه آزمایشگاه: فیلتر کردن تصاویر Lab Session: Filtering Images

طراحی تصاویر روی بوم Drawing Images on Canvas

• طراحی تصاویر Drawing Images

• طراحی تصاویر Drawing Images

• جلسه آزمایشگاه: طراحی شخصیت های پوکمون از یک کاشی Lab Session: Drawing Pokemon Characters From A Tile

• جلسه آزمایشگاه: فیلتر کردن تصاویر Lab Session: Filtering Images

موضوعات پیشرفته بوم Canvas Advanced Topics

• save() و restore() حالت canvas save() and restore() the canvas state

• بوم را به عنوان تصویر ذخیره کنید Save Canvas as an Image

• الگوها Patterns

• گرادیان ها Gradients

موضوعات پیشرفته بوم Canvas Advanced Topics

• save() و restore() حالت canvas save() and restore() the canvas state

• بوم را به عنوان تصویر ذخیره کنید Save Canvas as an Image

• الگوها Patterns

• گرادیان ها Gradients

تصاوير متحرك Animations

• انیمیشن جن Sprite Animation

• Lab Session: Running A Game Character Lab Session: Running A Game Character

تصاوير متحرك Animations

• مبانی انیمیشن Animation Basics

• مبانی انیمیشن Animation Basics

• جلسه آزمایشگاه: توپ پرش Lab Session: Bouncing Ball

• جلسه آزمایشگاه: توپ پرش Lab Session: Bouncing Ball

• انیمیشن جن Sprite Animation

• Lab Session: Running A Game Character Lab Session: Running A Game Character

تحولات روی بوم Transformations on Canvas

• مقیاس Scale

• ترجمه کردن Translate

• تبدیل Transform

تحولات روی بوم Transformations on Canvas

• مقیاس Scale

• چرخش Rotate

• چرخش Rotate

• ترجمه کردن Translate

• تبدیل Transform

ساخت فیزیک با انیمیشن روی بوم Making Physics with Animations on Canvas

• شتاب Acceleration

• پروجکشن افقی و پروجکشن زاویه ای Horizontal Projection and Angular Projection

• تکانه در یک محور Momentum on One Axis

ساخت فیزیک با انیمیشن روی بوم Making Physics with Animations on Canvas

• معرفی Introduction

• معرفی Introduction

• سرعت Velocity

• سرعت Velocity

• شتاب Acceleration

• پروجکشن عمودی Vertical Projection

• پروجکشن عمودی Vertical Projection

• پروجکشن افقی و پروجکشن زاویه ای Horizontal Projection and Angular Projection

• تکانه در یک محور Momentum on One Axis

• حرکت در دو محور Momentum on Two Axes

• حرکت در دو محور Momentum on Two Axes

تعاملات کاربر بر روی بوم User Interactions on Canvas

• رسیدگی به رویدادهای کلیدی Handling Key Events

• جلسه آزمایشگاه: کشیدن و رها کردن اشیاء بوم Lab Session: Dragging and Dropping Canvas Objects

تعاملات کاربر بر روی بوم User Interactions on Canvas

• رسیدگی به رویدادهای کلیدی Handling Key Events

• مدیریت رویدادهای ماوس Handling Mouse Events

• مدیریت رویدادهای ماوس Handling Mouse Events

• جلسه آزمایشگاه: شعبده بازی یک توپ با ماوس Lab Session: Juggling a Ball with Mouse

• جلسه آزمایشگاه: شعبده بازی یک توپ با ماوس Lab Session: Juggling a Ball with Mouse

• جلسه آزمایشگاه: کشیدن و رها کردن اشیاء بوم Lab Session: Dragging and Dropping Canvas Objects

پروژه: ساخت بازی Flappy Monster Project : Building a Flappy Monster Game

• ایجاد ساختار پروژه Creating Project Structure

• ایجاد کلاس بازی قسمت 1 Creating the Game Class Part 1

• ایجاد کلاس بازی قسمت 2 Creating the Game Class Part 2

• ایجاد پس زمینه Creating the Background

• ایجاد دیوارها Creating the Walls

• ایجاد هیولا Creating the Monster

• رفع: مشکل همپوشانی دیوارها برطرف شد Fix: Walls Overlap Issue Fixed

پروژه: ساخت بازی Flappy Monster Project : Building a Flappy Monster Game

• ایجاد ساختار پروژه Creating Project Structure

• ایجاد ساختار پروژه Creating Project Structure

• ایجاد کلاس بازی قسمت 1 Creating the Game Class Part 1

• ایجاد کلاس بازی قسمت 2 Creating the Game Class Part 2

• ایجاد پس زمینه Creating the Background

• ایجاد تابلوی امتیاز Creating the Score Board

• ایجاد تابلوی امتیاز Creating the Score Board

• ایجاد دیوارها Creating the Walls

• ایجاد هیولا Creating the Monster

• تشخیص برخورد و لمس نهایی Collision Detection and Final Touches

• تشخیص برخورد و لمس نهایی Collision Detection and Final Touches

• رفع: مشکل همپوشانی دیوارها برطرف شد Fix: Walls Overlap Issue Fixed

پروژه: کاربرد رنگ ساختمان Project : Building Paint Application

• طراحی روی بوم Drawing on Canvas

• پاک کردن و دانلود نقشه ها Clear and Download Drawings

پروژه: کاربرد رنگ ساختمان Project : Building Paint Application

• بررسی اجمالی طراحی پروژه Project Design Overview

• بررسی اجمالی طراحی پروژه Project Design Overview

• دست زدن به رنگ و قلم مو Handling Color and Brush

• دست زدن به رنگ و قلم مو Handling Color and Brush

• طراحی روی بوم Drawing on Canvas

• پاک کردن و دانلود نقشه ها Clear and Download Drawings

پایان سفر End of Journey

• بعدش چی؟ What's next?

پایان سفر End of Journey

• بعدش چی؟ What's next?