شروع کار مقدماتی با HTML5 Canvas (جلسه 17) : کار با تصاویر در Canvas - قسمت 4

در جلسه گذشته در مورد روشهای قرار دادن تصاویر درون canvas صحبت کردیم و در این جلسه میخوایم مطالب مربوط به تصاویر درون Canvas رو به پایان برسونیم.

رسم کردن و کشیدن تصاویر با drawImage

زمانی که یک تصویر رو به روشهای مختلفی که در جلسات قبل آدرس دهی کردیم، میتونیم از اون درون Canvas استفاده کنیم و اون رو در موقعیت دلخواهمون رسم کنیم. همونطور که دیدید درون مثالهایی که در جلسات قبل میزدیم از متد drawImage برای رسم تصاویر استفاده میکردیم اما توضیحی در مورد اون بهتون ندادم. کارهای مختلفی رو میتونین با استفاده از drawImage انجام بدین. ساده‌ترین روش استفاده از این متد بصورت زیر هست:

ctx.drawImage(image, x, y);

توضیحات:

• image : تصویر مورد نظر رو بصورت یکی از روشهایی که در جلسات قبل توضیح دادیم، میسازیم و آدرس دهی میکنیم
• x : موقعیت افقی رسم تصویر بر canvas
• y : موقعیت عمودی  رسم تصویر بر canvas

با این کار متد drawImag، تصویر مورد نظر رو در مختصات x و y رسم میکنه. این تصویر رو در نظر بگیرید:

میخوایم این تصویر رو بر روی Canvas رسم کنیم و یک مسیر رو بر روی اون رسم کنیم. برای اینکار بصورت زیر عمل میکنیم:

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

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
img.onload = function() {
	ctx.drawImage(img, 0, 0);
	ctx.beginPath();
	ctx.moveTo(30, 96);
	ctx.lineTo(70, 66);
	ctx.lineTo(103, 76);
	ctx.lineTo(170, 15);
	ctx.stroke();
};

با اینکار خروجی بصورت زیر خواهد شد:همونطور که میبینید مسیر خطی مورد نظر بر روی نمودار رسم شده. شما میتونین به همین روش نمودارهای پیشرفته‌تری رو به وجود بیارید.

بزرگ و کوچک کردن تصاویر یا Scaling:

شما میتونین دو تا  ورودی رو در انتهای متد drawImage اضافه کنید و با استفاده از اون width و height مورد نظرتون برای رسم شدن در Canvas رو مشخص کنید. بصورت زیر:

ctx.drawImage(image, x, y, width, height);

فرض کنید که میخوایم یک تصویر رو تغییر اندازه بدیم و کوچکش کنیم و اون رو بصورت کاشی کاری در کنار هم بچینیم. در اینجا میخوایم یک تصویر رو در 4 ردیف و 3 ستون رسم کنیم. برای اینکار بصورت زیر عمل میکنیم:

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

var img = new Image();
img.src = 'ng.png';
img.onload = function() {
	for (var i = 0; i < 4; i++) {
		for (var j = 0; j < 3; j++) {
			ctx.drawImage(img, j * 50, i * 50, 50, 50);
		}
	}
};

خروجی هم بصورت زیر میشه:

بهمین راحتی. دیدید که تصویر مورد نظر رو به 50 در 50 پیکسل تغییر اندازه دادیم و اون رو با استفاده از دو حلقه for درون هم، بصورت کاشی کاری در 4 ردیف و 3 ستون کنار هم قرار دادیم.

اگر یادتون باشه و مطالب مربوط به ویژگی‌های CSS رو دنبال کرده باشید، چند وقت پیش در مورد ویژگی image-rendering توضیحاتی رو دادیم و بیان کردیم زمانی که تصویر مورد نظر رو بزرگ یا کوچک میکنیم، میتونیم با استفاده از این ویژگی، نحوه رندر شدن تصویر Scale شده رو مشخص کنیم و به مرورگر بگیم که بصورت اتوماتیک اون رو بهبود ببخشه یا خیر.

در اینجا هم همچنین کاری رو میتونیم انجام بدیم. مثلا فرض کنید که چنین کدی رو داشته باشیم:

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

var img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==';
img.onload = function() {
	ctx.drawImage(img, 10, 10);
};

این کد تصویر مورد نظر که بصورت Data URI هست رو درون مختصات 10 و 10 canvas رسم میکنه. این تصویر 4 در 4 پیکسل هست و اگر اون رو بزرگ کنیم بصورت زیر خواهد بود:

خب با کدی که در بالا قرار دادیم، تصویر 4 در 4 در موقعیت 10 و 10 رسم میشه. بصورت زیر:

حالا میتونیم اون رو به سادگی بزرگ کنیم و Scale انجام بدیم. برای اینکار ورودی‌های چهارم و پنجم رو برای متد drawImage قرار میدیم. بصورت زیر:

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

var img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==';
img.onload = function() {
	ctx.drawImage(img, 10, 10, 100, 100);
};

با اینکار خروجی بصورت زیر میشه:

میبینید که دیگه تصویر حالت پیکسلی خودش رو نداره و مرورگر بصورت اتوماتیک اون رو نرم کرده و رنگها درون هم پخش شدن و کمی حالت محو شدگی به خودش گرفته. شما میتونین با استفاده از ویژگی imageSmoothingEnabled بر روی این حالت کنترل داشته باشید و اگر اون رو برابر با false قرار بدین، مرورگر دیگه بصورت اتوماتیک این کار رو انجام نمیده و حالت پیکسلی تصویر باقی خواهد ماند. بصورت زیر:

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

var img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUCB1j9Pf3/88ABMmMjCCKgQlMIhGMu3btAquY9mMDWBhDBQAutwfDrUlKzQAAAABJRU5ErkJggg==';
img.onload = function() {
	ctx.drawImage(img, 10, 10, 100, 100);
};

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

میبینید که در بالا vendor prefix‌ها رو هم قرار دادیم تا در مرورگرهای مختلف به درستی کار کنه. حالا اگر خروجی رو ببینیم، تصویر بصورت پیکسلی در اومده است:

بهمین راحتی.

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

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

موفق باشید

یا علی

Source

نویسنده

محمد اسفندیاری

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