- چگونه ماژول imagick را فعال کنم
- تخفیف نوروزی ۱۴۰۳
- هدایت کردن پارک دامنه به برگه دلخواه
- فرم ثبت سفارش در php
- مشکل با اضافه کردن دامین ir در کلادفلر
- ارسال ایمیل در هاست اشتراکی با php
- حساب نکردن هزینه پست در بعضی از شهرها
- چگونه کارآموز سئو شویم؟
- چگونه یک فایل htaccess. درست را برای یک وب سایت وردپرس ایجاد کنیم؟
- مشکل ریدایرکت صفحه اصلی
آخرین مطالب
امکانات وب
همونطور که میدونید در جلسه قبل مقدماتی در مورد تبدیل یا Transformation براتون قرار دادیم و شما رو با اون آشنا کردیم. در این جلسه قصد داریم در مورد متد Translation یا انتقال براتون توضیح بدیم.
Translating یا انتقال
اولین متد مربوط به تبدیل یا Transformation که در مورد اون براتون توضیح میدیم، متد Translate هست. با استفاده از این متد میتونین Canvas و مبدا اون رو به نقطه دیگری انتقال بدین و اون رو جابجا کنید. 
همونطور که در تصویر بالا نیز مشاهده میکنید، با استفاده از این متد میتونین مبدا مربوط به Canvas رو در دو جهت افقی و عمودی جابجا کنید و اون رو حرکت بدید. x مقدار حرکت افقی و y مقدار حرکت عمودی رو مشخص میکنه.
همیشه سعی کنید قبل از اینکه مبدا رو به نقطه دیگری منتقل کنید، با استفاده از متد save وضعیت فعلی رو ذخیره سازی کنید تا در مواقع مورد نظر به اون دسترسی داشته باشید. با اینکار دیگه لازم نیس بعد از اینکه مبدا رو به نقطه دیگه انتقال دادید، دوباره یکبار دیگه مبدا رو به نقطه اول انتقال بدین. همچنین اگر انتقال رو درون یک حلقه تکرار کنید و اگر حالت قبل رو ذخیره نکنید، باعث میشه که قسمتی از چیزی که رسم میشه خارج از محدوده Canvas قرار بگیره و این چیز مطلوبی نیست. پس در ابتدای هر تکرار حلقه باید حالت فعلی رو ذخیره کرد و در انتهای هر حلقه حالت قبل رو بازگردانی کرد.
حالا یک مثال برای Translation براتون میزنم که بهتر با اون آشنا بشید. در این مثال مزایای انتقال مبدا Canvas رو متوجه خواهید شد. بدون استفاده از متد Translate همه مستطیل هایی که رسم میکنیم، در مختصات 0 و 0 رسم خواهند شد. با استفاده از Translate میتونیم در هر بار تکرار حلقه، موقعیت مبدا رو تغییر بدیم و در اونجا یک مستطیل رو رسم کنیم. با اینکار دیگه لازم نیس که مختصات رو درون متد fillRect بزاریم و خودمون بصورت دستی موقعیت مستطیل رو مشخص کنیم. کد زیر رو در نظر بگیرید:
1 2 3 4 5 6 7 8 9 10 11 12 | varcanvas=document.getElementById('canvas'); varctx=canvas.getContext('2d'); for(vari=0;i<3;i++){ for(varj=0;j<3;j++){ ctx.save(); ctx.fillStyle='rgb('+(51*i)+', '+(255-51*i)+', 255)'; ctx.translate(10+j*50,10+i*50); ctx.fillRect(0,0,25,25); ctx.restore(); } } |
همونطور که دیدید دو حلقه for رو هر کدام 3 بار تکرار کردیم. با اینکار میخوایم 3 ردیف و 3 ستون مربع درست کنیم. در هر تکرار در ابتدا وضعیت فعلی رو ذخیره میکنیم و در آخر هم اون رو به وسیله متد Restore بازگردانی میکنیم. درون هر حلقه هم مختصات افقی و عمودی متد Translate رو تغییر میدیم تا مربعی که رسم میشه با هم فاصله داشته باشه و در جاهای مورد نظر قرار بگیرن. با اینکار خروجی بصورت زیر خواهد شد:
اگر از متد Save و Restore در ابتدا و انتهای هر تکرار حلقه استفاده نمی کردیم، کدها بصورت زیر می شد:
1 2 3 4 5 6 7 8 9 10 | varcanvas=document.getElementById('canvas'); varctx=canvas.getContext('2d'); for(vari=0;i<3;i++){ for(varj=0;j<3;j++){ ctx.fillStyle='rgb('+(51*i)+', '+(255-51*i)+', 255)'; ctx.translate(10+j*50,10+i*50); ctx.fillRect(0,0,25,25); } } |
خروجی در مرورگر بصورت زیر خواهد شد:
همونطور که میبینید مربع ها دیگه نظم قبلی رو ندارن و همچنین بیشتر موارد از محدوده Canvas خارج شدن و قابل مشاهده نیستن. در جلسه های بعدی در مورد دیگر متدهای Transformation براتون توضیح میدم.
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...ما را در سایت سون لرن • آموزش دنبال می کنید
برچسب : نویسنده : استخدام کار 7learn بازدید : 304
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403
لینک دوستان
- کرم سفید کننده وا
- دانلود آهنگ جدید
- خرید گوشی
- فرش کاشان
- بازار اجتماعی رایج
- خرید لایسنس نود 32
- هاست ایمیل
- خرید بانه
- خرید بک لینک
- کلاه کاسکت
- موزیک باران
- دانلود آهنگ جدید
- ازن ژنراتور
- نمایندگی شیائومی مشهد
- مشاوره حقوقی تلفنی با وکیل
- کرم سفید کننده واژن
- اگهی استخدام کارپ
- دانلود فیلم
- آرشیو مطالب
- فرش مسجد
- دعا
- لیزر موهای زائد
- رنگ مو
- شارژ