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

‏  4 دقیقه
۱۵ فروردین ۱۳۹۶
شروع کار مقدماتی با HTML5 Canvas (جلسه 13) : کار با متن در Canvas

html-canvas

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

کار با متن در Canvas

شما میتونین متون مورد نظر خودتون رو درون Canvas قرار بدین. برای اینکار میتونین از دو متد زیر استفاده کنید:

  • fillText : با استفاده از این متد میتونین متنهای مورد نظرتون رو بصورت توپر رسم کنید
  • strokeText : با استفاده از این متد میتونین متنها رو بصورت توخالی رسم کنید

نحوه استفاده از این دو متد و آرگومانهایی که میگیرن مشابه یکدیگر هست. دستور کلی این دو متد بصورت زیر هست:

ctx.fillText(text, x, y [, maxWidth]);

و برای strokeText:

ctx.strokeText(text, x, y [, maxWidth]);

میبینید که آرگومانهای اونا شبیه به هم هست.text location

  • text : در اینجا متنی که میخوایم رو قرار میدیم
  • x : موقعیت افقی محلی که قصد داریم متن شروع به نوشتن کنه
  • y : موقعیت عمودی محلی که قصد داریم متن شروع به نوشتن کنه
  • maxWidth : این ورودی اختیاری هست. هر متنی که قرار میدیم با توجه به فونت و دیگر استایلهایی که داره، یک طول افقی خواهد داشت. حالا اگر عددی که برای maxWidth قرار میدیم، بزرگتر از مقدار طول متن محاسبه شده بشه، که هیچ اتفاقی نمیوفته. اما اگر کوچکتر باشه، باعث میشه که متن خروجی فشرده‌تر بشه تا در طولی که مشخص کردیم، قرار بگیره.

همچنین ویژگی‌های دیگه ای وجود دارن که با استفاده از اونا میتونین استایل متون رو تغییر بدین.

تعیین فونت و سایز متن:

با استفاده از ویژگی font میتونیم 4 استایل مربوط به فونت رو مشخص کنیم:

ctx.font = [font style][font weight][font size][font face]

در Canvas نمیتونین همانند CSS، استایلها رو بصورت جداگانه مشخص کنید و باید همه اونا رو بصورت یک رشته و پشت سر هم قرار بدین. اگر از این موارد استفاده نکنید، برای هر کدام مقدار پیش فرض قرار خواهد گرفت. اینو در نظر داشته باشید که موارد بالا حتما باید در جای خودشون قرار بگیرن و نباید ترتیب اونا رو بهم ریخت. اگر فونت انتخاب شده در کامپیوتر مقصد نباشد، بصورت اتوماتیک از فونت پیش فرض Serif استفاده خواهد شد. همچنین میتونین با استفاده از @font-face درون CSS، فونت مورد نظرتون رو به Canvas اضافه کنید که همه ازش بهره ببرن.

ترازبندی متن:

تصویر زیر رو ببینید:textalignment

همونطور که دیدید میتونیم با استفاده از ویژگی textAlign جهت ترازبندی متون رو مشخص کنید. خط قرمز در تصویر بالا، همون موقعیت افقی مشخص شده با استفاده از متدهای fillText و strokeText می‌باشد. مقادیر زیر برای این ویژگی در دسترس هستن:

  • left
  • right
  • center
  • start
  • end

این ویژگی بصورت پیش فرض برابر با مقدار Start هست و اگر direction صفحه بصورت ltr یا چپ به راست باشه، نقطه شروع رو بصورت اتوماتیک در چپ قرار میده و اگر جهت صفحه rtl باشه، محل نقطه شروع در راست متن قرار خواهد گرفت.

نحوه قرارگیری با Baseline:

تصویر زیر رو ببینید:text base line

همونطور که دیدید با استفاده از ویژگی textBaseline میتونیم نحوه قرارگیری عمودی متن نسبت به Baseline رو مشخص کنیم.

خب حالا به مثال زیر دقت کنید:

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

ctx.font = 'italic bold 48px Times New Roman';
ctx.fillStyle = '#f00';
ctx.fillText("7Learn.com", 20, 150);

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

همونطور که دیدید با استفاده از fillText، متن توپر رو رسم کردیم. اگر بجای fillText از strokeText استفاده کنیم، متن بصورت توخالی رسم خواهد شد. با استفاده از fillStyle هم رنگ متن رو قرمز کردیم. میتونیم برای متن مورد نظر Pattern یا Gradient هم قرار بدیم.

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

با استفاده از متد measureText میتونین قبل از رسم شدن متن، عرض اون رو بدست بیارید و اون رو در وسط Canvas قرار بدین. بصورت زیر:

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

var text = "7Learn.com";
ctx.font = 'italic bold 48px Times New Roman';
ctx.fillStyle = '#f00';
var textWidth = ctx.measureText(text).width;
var xPosition = (canvas.width / 2) - (textWidth / 2)
ctx.fillText(text, xPosition, 150);

با اینکار هر چقدر هم که عرض Canvas رو کم و زیاد کنید، متن در وسط قرار خواهد گرفت. بصورت زیر:html5 canvas 44

بهمین راحتی.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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

ما در سون لرن با محدودسازی دسترسی آزاد به اینترنت مخالفیم     اطلاعات بیشتر