شروع کار مقدماتی با HTML5 Canvas (جلسه ۱۴) : کار با تصاویر در Canvas – قسمت ۱

html-canvas

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

کار با تصاویر در Canvas

همونطور که میدونید تا اینجای کار چیزای مختلفی رو یاد گرفتیم و اشکال مختلفی رو ساختیم و با استفاده از روشهای مختلف به اونا استایل دادیم. یکی از ویژگی‌های Canvas اینه که میتونیم از تصاویر، درون اون استفاده کنیم. از تصاویر میتونیم برای مقاصد مختلفی استفاده کنیم. مثلا میشه بصورت داینامیک یا پویا درون تصویر تغییراتی رو ایجاد کرد و نمایش داد، میتونیم تصویر رو به عنوان پس زمینه قرار بدیم و همچنین میتونیم از اونا برای ساخت بازی استفاده کنیم. کارهای مختلف دیگه ای هم میشه با استفاده از تصاویر انجام داد. ما از هر تصویری که مرورگرها از اون پشتیبانی میکنن، مثل jpg یا png یا gif میتونیم درون Canvas استفاده کنیم. شما حتی میتونین تصاویری که توسط Canvas‌های دیگر درون صفحه فعلی ساخته شده، استفاده کنید.

بصورت ساده نحوه وارد کردن تصاویر و استفاده از اونا در Canvas رو میشه بصورت زیر خلاصه کرد:

  1. باید تصویر مورد نظر رو با استفاده از روشهای مختلفی که وجود داره، آدرس دهی و تعیین کنیم
  2. بعد از اون میتونیم با استفاده از متد drawImage، تصویر مورد نظر رو درون Canvas قرار بدیم و ترسیم کنیم

خب حالا بصورت عمیق‌تر وارد این مراحل میشیم و روشهای مختلف رو با هم بررسی میکنیم.

روشهای مختلف دریافت تصویر

استفاده از تگ img:

در این روش شما میاید و در همون صفحه ای که Canvas وجود داره، تصویر مورد نظرتون رو با استفاده از تگ img قرار میدین و درون ویژگی src اون، آدرس تصویر رو مشخص میکنید. بعد از اون با استفاده از روشهای مختلف میتونین به اون دسترسی داشته باشید:

  • استفاده از document.images که باعث میشه که یک آرایه که شامل تمام تصاویر صفحه فعلی رو بهتون برگردونه و میتونین از تصویر مورد نظرتون استفاده کنید
  • استفاده از متد document.getElementsByTagName() که میتونین نوع تگ که img هست رو به اون پاس بدین، این متد هم خروجی همانند مورد بالا برمیگردونه
  • همچنین اگر برای تگ img مورد نظر ویژگی id رو مشخص کرده باشیم، میتونیم به راحتی با استفاده از getElementById() به اون دسترسی داشته باشیم

خب برای اینکار فرض کنید که تگ img زیر رو داشته باشیم:

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

با استفاده از روش ساده زیر میتونیم در Javascript به اون دسترسی داشته باشیم.

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

var img = document.getElementById('image');
img.addEventListener('load', function() {
	ctx.drawImage(img, 10, 10);
}, false);

همونطور که دیدید تصویر رو درون متغیر img ذخیره کردیم. شما فورا نمیتونین از این تصویر استفاده کنید و باید حتما متد load رو برای اون استفاده کنید تا از لود شدن اون بصورت کامل مطمئن شده باشید. برای اینکار از متد addEventListener استفاده کردیم و برای رویداد load یک Callback تعریف کردیم و زمانی این تابع اجرا خواهد شد که رویداد load مربوط به img رخ بدهد. درون تابع هم اومدیم و از متد drawImage استفاده کردیم و تصویر رو در موقعیت ۱۰ و ۱۰ Canvas رسم کردیم. با اینکار خروجی بصورت زیر میشه.html5 canvas 45

بهمین راحتی.

در جلسه بعد با ادامه روشها و توضیحات تکمیلی در خدمتتون هستیم.

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

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











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

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

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0