تخفیف ویژه

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

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

html-canvas

همونطور که اطلاع دارید در جلسه قبل توضیحات مقدماتی در مورد HTML5 Canvas بهتون دادم و شما رو با تاریخچه و دیگر موارد اون آشنا کردم. در این جلسه قصد داریم کدنویسی رو شروع کنیم و یاد بگیریم که المنت canvas رو چطوری قرار بدیم و همچنین چه ویژگی هایی داره و ...

در ابتدا یک فایل بنام index.html بسازید و کدهای زیر رو درون اون قرار بدین:

<!DOCTYPE html>
<html>
	<head>
	    <title>HTML5 Canvas Learning</title>
	</head>

	<body>
	    <canvas></canvas>

	    <script>
	    	// Javascript Code Goes Here
	    </script>
	</body>
</html>

همونطور که دیدید ساختار HTML خیلی ساده و قابل فهم هست و در ابتدای قسمت Body یک canvas قرار دادیم و در انتها هم یک بلاک Script قرار دادیم که در آینده کدهای Javascript رو در بین اون قرار میدیم. همونطور که میبینید برای canvas مورد نظر هیچ ویژگی رو قرار ندادیم. بیشتر ویژگی هایی که برای این المنت مورد استفاده قرار میگیرن بصورت زیر هستن:

  • id : این مورد رو میشه مهمترین ویژگی دونست و با استفاده از id میتونیم در javascript به این المنت دسترسی داشته باشیم و کارهای مورد نظرمون رو انجام بدیم. پس سعی کنید همیشه برای canvas مورد نظرتون id رو قرار بدین و حتما هم unique یا یکتا باشه و تکراری نباشه.
  • width : با استفاده از این ویژگی عرض canvas رو مشخص میکنیم و بهتره که این مورد رو هم همیشه مورد استفاده قرار بدین. مقدار پیش فرض این ویژگی 300 پیکسل هست.
  • height : با استفاده از این ویژگی ارتفاع canvas رو مشخص میکنیم و بهتره که این مورد رو هم همیشه مورد استفاده قرار بدین. مقدار پیش فرض این ویژگی 150 پیکسل هست.
  • style : از این ویژگی بعضی اوقات استفاده میشه و با استفاده از اون استایلهای خاصی به canvas داده میشه. مثلا میتونیم برای canvas یک border قرار بدیم. علاوه بر این ویژگی، میتونیم استایلهامون رو در تگ style یا در فایل CSS خارجی هم قرار بدیم و فرقی با هم ندارند.

canvas هم مثل دیگر المنتهای HTML، مستطیلی شکل هست. شما میتونین بصورت همزمان درون یک صفحه از چند canvas استفاده کنید و محدودیتی از این نظر ندارید. اگر کد بالا رو درون مرورگر باز کنید، هیچ اثری درون صفحه نمی‌بینید. اما اگر Inspector رو باز کنید، اون رو مشاهده خواهید کرد:html5 canvas 1

دیدید که canvas وجود داره و عرض و ارتفاع اون هم به ترتیب 300 و 150 پیکسل هست. canvas بصورت پیش فرض هیچ محتوایی رو درون خودش نداره و خالی هست و همچنین هیچ استایلی بهش اعمال نمیشه و بهمین دلیل هست که نمیتونین اون رو در صفحه ببینید. شما میتونن یک border برای اون قرار بدین تا قابل مشاهده بشه. پس canvas رو در کد بالا بصورت زیر تغییر میدیم:

<canvas id="canvas" width="200" height="200" style="border: 1px solid #000;"></canvas>

میبینید که ویژگی‌های بیان شده رو برای این المنت مشخص کردیم و در آخر یک border هم به اون نسبت دادیم. با اینکار خروجی بصورت زیر میشه:html5 canvas 2

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

<canvas id="canvas" width="200" height="200" style="border: 1px solid #000;">
	Your browser does not support html canvas. Please update your browser and try again.
</canvas>

حالا اگر این کد رو در مرورگرهایی که از canvas پشتیبانی میکنن اجرا کنیم، هیچ متنی رو مشاهده نمیکنیم. اما اگر مثلا من این مورد رو درون Internet Explorer 8 باز کنم، متن مورد نظر نمایش داده میشه. در جلسه بعد کدنویسی با Javascript رو شروع میکنیم.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

سیامک درخشانزاده

سلام
لطفا یک برنامه کد نویسی متن خوب معرفی کنید

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

سلام
بستگی به کارتون داره ولی من بهتون Visual Studio Code‌ که یک محصول رایگان از Microsoft‌ هست و از زبان فارسی نیز پشتیبانی می کند، استفاده کنید
لینک این نرم افزار:
https://code.visualstudio.com/download
موفق باشید

hamed_z2001

آقا محمد , ادامه آموزش چی شد پس؟؟
🙁
هر روز سر میزنم ,چک میکنم ,ولی این آموزش آپدیت نمیشه …
😥 😥

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

سلام عجله نداشته باشید….
فردا قسمت بعد رو قرار میدم
موفق باشید

hamed_z2001

خیلی وقت بود منتظر این سری از آموزشها بودم … وقت نمیکردم و منبع خوبیم واسه canvas نداشتم,…
لطفا مستمر و تا آخر این آموزش رو ادامه بدید .
واقعا ممنون ازتون …

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

باشه حتما…
خواهش میکنم
موفق باشید

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