آموزش اصول HTML5 بوم

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

شروع کار با HTML5 Canvas Getting Started with the HTML5 Canvas

• مقدمه Introduction

• سناریوهای استفاده از بوم HTML5 HTML5 Canvas Usage Scenarios

• نسخه ی نمایشی: نسخه ی نمایشی بازی Demo: Game Demos

• نسخه ی نمایشی: برنامه های جذاب Demo: Engaging Applications

• نسخه ی نمایشی: نمودار Demo: Charting

• اصول HTML5 بوم HTML5 Canvas Fundamentals

• سلام نسخه ی نمایشی جهانی Hello World Demo

• نمای کلی Canvas API Overview of the Canvas API

• نسخه ی نمایشی: مستندات Canvas API Demo: Canvas API Documentation

• خلاصه Summary

طراحی با HTML5 Canvas Drawing with the HTML5 Canvas

• مقدمه Introduction

• رسم مستطیل و بیضی Drawing Rectangles and Ellipses

• نسخه ی نمایشی: نمودار میله ای ساده Demo: Simple Bar Chart

• نسخه ی نمایشی: نمودار میله ای ساده با تغییرات Demo: Simple Bar Chart with Transforms

• نسخه ی نمایشی: رسم حلقه ها Demo: Drawing Circles

• نسخه ی نمایشی: با استفاده از arcTo () Demo: Using arcTo()

• رسم خطوط و مسیرها Drawing Lines and Paths

• نسخه ی نمایشی: رسم خطوط Demo: Drawing Lines

• نسخه ی نمایشی: نمودار خط ساده Demo: Simple Line Chart

• نسخه ی نمایشی: با استفاده از bezierCurveTo () Demo: Using bezierCurveTo()

• نسخه ی نمایشی: با استفاده از quadraticCurveTo () Demo: Using quadraticCurveTo()

• رسم متن Drawing Text

• نسخه ی نمایشی: پر کردن ، نوازش و اندازه گیری متن Demo: Filling, Stroking, and MeasuringText

• نسخه ی نمایشی: استفاده از بوم تبدیل با متن Demo: Using Canvas Transforms with Text

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

• نسخه ی نمایشی: با استفاده از توابع تصویر Demo: Using Image Functions

• نقاشی فیلم Drawing Video

• نسخه ی نمایشی: همگام سازی ویدئو با بوم Demo: Syncing Video with a Canvas

• خلاصه Summary

دستکاری پیکسل Manipulating Pixels

• مقدمه Introduction

• ارائه گرادیان ها Rendering Gradients

• نسخه ی نمایشی: ایجاد شیب های خطی Demo: Creating Linear Gradients

• نسخه ی نمایشی: ایجاد گرادیان های شعاعی Demo: Creating Radial Gradients

• استفاده از Transforms Using Transforms

• نسخه ی نمایشی: شروع کار با Transform Functions Demo: Getting Started with Transform Functions

• نسخه ی نمایشی: با استفاده از transform () و setTransform () Demo: Using transform() and setTransform()

• دسترسی به Pixels Accessing Pixels

• نسخه ی نمایشی: ایجاد Pixels به صورت پویا Demo: Creating Pixels Dynamically

• نسخه ی نمایشی: پیکسل های خاکستری Demo: Grayscale Pixels

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

• نسخه ی نمایشی: شروع با انیمیشن Demo: Getting Started with Animation

• نسخه ی نمایشی: استفاده از شیب ها ، تغییر شکل ها و انیمیشن ها Demo: Using Gradients, Transforms, and Animations

• خلاصه Summary

ساخت نمودار داده های سفارشی Building a Custom Data Chart

• مقدمه Introduction

• ایجاد شی CanvasChart Creating the CanvasChart Object

• ایجاد کد شل CanvasChart Creating the CanvasChart Shell Code

• رندر متن و گرادیان ها Rendering Text and Gradients

• ارائه خطوط متن و راهنمای داده های داده Rendering Data Points Text and Guide Lines

• اتصال خطوط نقطه داده Connecting Data Point Lines

• ارائه داده ها Rendering Data Points

• اضافه کردن انیمیشن Adding Animation

• اضافه کردن همپوشانی و تعامل Adding Overlays and Interactivity

• خلاصه Summary