شروع کار مقدماتی با HTML5 Canvas (جلسه 18) : Transformation یا تبدیل - ذخیره و بازگرداندن وضعیت Canvas

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۳۱ فروردین ۱۳۹۶

فهرست محتوای این مقاله

    html-canvas

    در جلسات گذشته در مورد قرار دادن تصاویر به روشهای مختلف درون Canvas براتون توضیحات مفصلی رو قرار دادیم و شما رو با اونا آشنا کردیم. در این جلسه و جلسات بعد قصد داریم که در مورد Transformation یا تبدیلات براتون توضیحاتی رو قرار بدیم.

    همونطور که میدونین تا اینجای کار فقط یاد گرفتیم که یک شکل رو به وجود بیاریم و به اون استایلی رو اعمال کنیم و در مختصات دلخواهمون اون رو رسم کنیم. تا اینجای کار ما از سیستم مختصات پیش فرض Canvas استفاده کردیم و زمانی که نیاز داشتیم، Canvas رو با استفاده از CSS بزرگ یا کوچک میکردیم تا بتونیم بیشتر جا برای رسم کردن داشته باشیم. با استفاده از قدرت Transformation شما این توانایی رو خواهید داشت که مبدا مختصات رو جابجا کنید، محورها رو بچرخونید و یا حتی اونا رو بزرگنمایی کنید.

    ذخیره و بازگردانی وضعیت Canvas

    قبل از اینکه ما نگاهی به متدهای Transformation بندازیم، شما رو با 2 متد ضروری و واجب که استفاده از اونا برای رسم کردن اشکال و ترسیمات پیچیده نیاز هست رو براتون توضیح میدیم.

    • متد save : این متد وضعیت فعلی Canvas رو بصورت کامل ذخیره میکنه
    • متد restore : این متد آخرین وضعیت ذخیره سازی شده با استفاده از متد save رو بازگردانی میکنه

    State یا وضعیت های canvas درون Stack یا ردیف پست سر هم قرار میگیرن. هر بار که متد Save صدا زده میشه، وضعیت فعلی Canvas به Stack اضافه میشه. هر State مربوط به Canvas شامل موارد زیر هست و موارد زیر ذخیره سازی میشن:

    • Transformation ها و تبدیلاتی که اعمال شده است. از قبیل Translate و Rotate و Scale و ...
    • مقدار فعلی ویژگی های زیر:
    1. strokeStyle
    2. fillStyle
    3. globalAlpha
    4. lineWidth
    5. lineCap
    6. lineJoin
    7. miterLimit
    8. lineDashOffset
    9. shadowOffsetX
    10. shadowOffsetY
    11. shadowBlur
    12. shadowColor
    13. globalCompositeOperation
    14. font
    15. textAlign
    16. textBaseline
    17. direction
    18. imageSmoothingEnabled
    • مقدار فعلی Clipping Path که در جلسات بعدی در مورد اون براتون توضیح میدیم.

    پس با هر بار استفاده از متد Save تمامی اطلاعات بالا ذخیره سازی میشن. هر بار که دلتون بخواد و در هر جایی از اجرای برنامه میتونین متد Save رو استفاده کنید و این حالت Canvas به Stack یا صف اضافه میشه و هر بار که متد restore رو فراخوانی میکنید، آخرین وضعیت ذخیره شده لود میشه و تنظیمات اون اعمال میشه. هر چه که از restore استفاده کنید، به وضعیتهای ذخیره شده قدیمی تر که در صف یا Stack قرار دارن، دسترسی پیدا خواهید کرد. در اینجا مثالی رو براتون قرار میدم که با استفاده از اون دو متد Save و Restore رو به خوبی متوجه خواهید شد. کد زیر رو در نظر بگیرید:

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.fillRect(0, 0, 150, 150);   // Draw a rectangle with default settings
    ctx.save();                  // Save the default state
    
    ctx.fillStyle = '#09F';      // Make changes to the settings
    ctx.fillRect(15, 15, 120, 120); // Draw a rectangle with new settings
    ctx.save();                  // Save the current state
    
    ctx.fillStyle = '#FFF';      // Make changes to the settings
    ctx.globalAlpha = 0.5; 
    ctx.fillRect(30, 30, 90, 90);   // Draw a rectangle with new settings
    
    ctx.restore();               // Restore previous state
    ctx.fillRect(45, 45, 60, 60);   // Draw a rectangle with restored settings
    
    ctx.restore();               // Restore original state
    ctx.fillRect(60, 60, 30, 30);   // Draw a rectangle with restored settings

    همونطور که دیدید در خط 4 یک مربع رسم کردیم و چون استایل اون رو مشخص نکردیم، استایل پیش فرض که همون رنگ مشکی هست، اعمال میشه. بعد از اون این وضعیت رو ذخیره کردیم تا بعدا بهش دسترسی داشته باشیم. در خط 7 یک رنگ تقریبا آبی رو برای استایل قرار دادیم و یک مربع کوچکتر رو رسم کردیم و با اینکار یک مربع آبی درون مربع سیاه رسم خواهد شد. بعد از اون مجددا وضعیت فعلی رو ذخیره کردیم. پس تا اینجای کار دو تا وضعیت رو به صف یا Stack اضافه کردیم. بعد از اون یک مربع دیگه با رنگ سفید و شفافیت 0.5 رو رسم کردیم. در خط 15 از متد restore استفاده کردیم. بنابراین آخرین وضعیت ذخیره سازی شده فراخوانی میشه و رنگ استایل آبی قرار داده میشه. بنابراین مربعی که در خط 16 رسم میشه، با استایل آبی رنگ رسم خواهد شد. در خط 18 یک بار دیگر از Restore استفاده شده و در اینجا به وضعیت ذخیره سازی شده قبلی میره و در این حالت رنگ استایل مشکی هست. پس مربعی که در خط آخر رسم میشه، با رنگ مشکلی رنگ رسم خواهد شد. بنابراین خروجی در مرورگر بصورت زیر خواهد بود:html5 canvas 55

    امیدوارم که به خوبی این متدها رو متوجه شده باشید. با استفاده از این متدها راحتتر میتونین با اشکال و رسم های پیچیده تر کار کنید.

    در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

    امیدوارم از این مطلب خوشتون اومده باشه.

    موفق باشید

    یا علی

    Source

    نویسنده
    بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

    جلسات دوره

    نظرات کاربران

    اولین دیدگاه این پست رو تو بنویس !

    نیاز به لاگین

    برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
    گزارش مشکل