سلام دوستان. کم کم به فصلهای انتهایی کتاب نزدیک میشیم. فصلی که امروز منتشر کردم در مورد کار با canvas و رابطهای مربوط به اونه.
امیدوارم که برای شما مفید باشه.
در این فصل به بحث دربارهی تکنیکهای ترسیم گرافیک در مرورگر پرداختیم و تمرکز ما روی عنصر <canvas> بود.
یک گرهی canvas نمایانگر ناحیهای است در سند که برنامهی ما در آن قسمت به ترسیم خواهد پرداخت. این ترسیم توسط یک شیء بستر (context) ترسیم انجام می شود که توسط متد getContext ایجاد می گردد.
رابط ترسیم دوبعدی (2D) این امکان را به ما می دهد تا اشکال متنوعی را رنگ کرده یا خط مرزی بدهیم. خاصیت fillStyle این بستر (context) نحوهی رنگآمیزی اشکال را مشخص می کند. خاصیتهای strokeStyle و lineWidth نحوهی ترسیم خطوط را کنترل می کنند.
چهارضلعی ها و بخشهای متنی را می توان با یک فراخوانی متد ترسیم کرد. دو متد fillRect و strokeRect برای ترسیم چهارضلعی و متدهای fillText و strokeText برای رسم متن استفاده می شوند. برای ترسیم اشکال دلخواه، ابتدا باید یک مسیر ایجاد کنید.
فراخوانی متد beginPath باعث ایجاد یک مسیر جدید می شود. چند متد دیگر برای افزودن خطوط و منحنیها به همین مسیر فراخوانی می شوند. به عنوان مثال، lineTo یک خط مستقیم اضافه می کند. زمانی که یک مسیر به پایان رسید، می توان با متد fill آن را پر (رنگ) کرد یا با استفاده از متد stroke دور آن خط مرزی رسم کرد.
حرکت دادن پیکسلها از یک تصویر یا یک canvas دیگر به canvas ما توسط متد drawImage انجام می پذیرد. به صورت پیشفرض، این متد کل تصویر مبدا را رسم می کند، اما با مشخص کردن پارامترهای بیشتر می توانی یک ناحیهی خاص از تصویر را کپی کرد. ما از این روش برای بازی خودمان و کپی کردن حالتهای کاراکتر بازی از یک تصویر که شامل همهی حالت ها بود استفاده کردیم.
دگرگونسازی (transformation) این امکان را به شما می دهد که یک شکل را به صورتهای متعدد ترسیم کنید. یک بستر ترسیم دوبعدی، دارای شکلی است که میتوان آن را با استفاده از translate، scale و rotate تغییر داد. این تغییرات روی تمامی ترسیمهای بعدی تاثیر می گذارد. یک حالت دگرگونسازی را می توان با استفاده از متد save ذخیره کرد و با متد restore بازگردانی کرد.
زمانی که یک تصویر متحرک را روی یک canvas نمایش می دهیم، متد clearRect را می توان برای پاکسازی یک قسمت از canvas قبل از ترسیم دوباره استفاده کرد.
