تخفیف ویژه

شروع کار مقدماتی با HTML5 Canvas (جلسه 19) : Transformation یا تبدیل - Translating یا انتقال

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

html-canvas

همونطور که میدونید در جلسه قبل مقدماتی در مورد تبدیل یا Transformation براتون قرار دادیم و شما رو با اون آشنا کردیم. در این جلسه قصد داریم در مورد متد Translation یا انتقال براتون توضیح بدیم.

Translating یا انتقال

اولین متد مربوط به تبدیل یا Transformation که در مورد اون براتون توضیح میدیم، متد Translate هست. با استفاده از این متد میتونین Canvas و مبدا اون رو به نقطه دیگری انتقال بدین و اون رو جابجا کنید. 

همونطور که در تصویر بالا نیز مشاهده میکنید، با استفاده از این متد میتونین مبدا مربوط به Canvas رو در دو جهت افقی و عمودی جابجا کنید و اون رو حرکت بدید. x مقدار حرکت افقی و y مقدار حرکت عمودی رو مشخص میکنه.

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

حالا یک مثال برای Translation براتون میزنم که بهتر با اون آشنا بشید. در این مثال مزایای انتقال مبدا Canvas رو متوجه خواهید شد. بدون استفاده از متد Translate همه مستطیل هایی که رسم میکنیم، در مختصات 0 و 0 رسم خواهند شد. با استفاده از Translate میتونیم در هر بار تکرار حلقه، موقعیت مبدا رو تغییر بدیم و در اونجا یک مستطیل رو رسم کنیم. با اینکار دیگه لازم نیس که مختصات رو درون متد fillRect بزاریم و خودمون بصورت دستی موقعیت مستطیل رو مشخص کنیم. کد زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

for (var i = 0; i < 3; i++) {
	for (var j = 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 در ابتدا و انتهای هر تکرار حلقه استفاده نمی‌کردیم، کدها بصورت زیر می‌شد:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

for (var i = 0; i < 3; i++) {
	for (var j = 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 براتون توضیح میدم.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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