آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

تعریف و ساخت canvas در HTML5

تعریف و ساخت canvas در HTML5

فصل چهارم ( معرفی HTML5 )

جلسه  هفتم  ( تعریف و ساخت canvas در HTML5 )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

در این جلسه ی آموزشی و جلسه ی بعد ، راجع به عناصر گرافیکی وب صحبت می کنیم . در این جلسه و جلسه ی بعد عنصر canvas رو بصورت کامل آموزش میدیم و سپس راجع به SVG بصورت کامل صحبت می کنیم.

معرفی canvas :

با canvas API دیگه به تصاویر چهارگوش و ساده محدود نیستید و میتونید با کمک جاوااسکریپت ، هرچیزی رو که دوست دارید ترسیم کنید . در این قابلیت ، چون نیازی به دانلود تصاویر از سرور نیست ، در سرعت بارگزاری سایت بسیار تاثیرگذاره و سرعت بارگزاری صفحه رو بالا میبره . با canvas میتونیم اشکال مختلف ، خط ، کمان ، متن ، گرادیانت ، الگو یا  pattern ترسیم کنید . در canvas شما میتونید پیکسل های مربوط به تصاویر و فیلم هارو تغییر بدید . خوب حالا چه مرورگرهایی از این قابلیت ویژه پشتیبانی میکنند ؟

Safari 2.0+

Chrome 3.0+

Firefox 3+

Internet explorer 9.0+

Opera 10.0+

Ios 1.0+

Android 1.0+

 نحوه ساخت عنصر canvas

شما میتونید فایل پروژه ای که باهم انجام میدیم رو در انتهای جلسه دانلود کنید اما برای یادگیری بهتر ، مرحله به مرحله با من همراه باشید و در سیستم خودتون کدهارو پیاده کنید .

اولین قدم برای استفاده از canvas ، افزودن عنصر canvas به صفحه هست ، این عنصر رو داخل <body> قرار میدید :

 متنی که بین این دو تگ قرار گرفته ، در صورتی نمایش داده میشه که مرورگر ، این عنصر رو پشتیبانی نکنه .

به دلیل اینکه canvas رو همراه با جاوااسکریپت استفاده می کنیم ، باید خاصیتی رو به canvas اضافه کنیم که بتونیم در درخت DOM ، اون رو انتخاب کنیم . برای همین منظور یک id به تگ canvas  اختصاص میدیم :

 چون میخوایم از جاوااسکریپت استفاده کنیم ، باید کتابخانه جی کوئری رو قبل از تعریف توابع فراخوانی کنیم . این کد رو درون عنصر <head> قرار میدید. (این کتابخانه رو میتونید از http://jquery.com دریافت کنید.)  :

 حالا باید توابع جاوااسکریپتمون رو فراخوانی کنیم ، توابع رو زمانی فراخوانی می کنیم که صفحه کامل بارگذاری شده باشه ، برای همین از document.ready استفاده می کنیم  :

فعلا داخل document.ready چیزی نمینویسیم ، فقط جای اون رو تعیین می کنیم .

حالا باید خصیصه های width  و  height رو به تگ canvas اضافه کنیم :

 حالا بخاطر اینکه بتونیم محدوده ی ایجاد شده توسط canvas رو در مرورگر ببینیم ، یک  border هم به canvas مون میدیم .

 محدوده ی canvas ی که ترسیم کردید به شکل زیر خواهد بود :

canvas

تا اینجا شما محدوده ی canvas رو مشخص کردید ، حالا میتونید اشکالی که میخواین رو در این محدوده ترسیم کنید .

رسم تمامی اشکال و تصاویر روی canvas فقط از طریق API جاوااسکریپت canvas امکان پذیره . ما تابعی رو به نام  draw()  فراخوانی می کنیم ، برای اینکار ابتدا این تابع رو تعریف می کنیم . در تعریف تابع از مقدار id تگ canvas برای شناسایی canvas استفاده می کنیم .

 این تابع رو قبل از document.ready بنویسید ، به شکل زیر :

 در این تابع گفتیم که canvas ی که در صفحه با آی دی irocanvas وجود داره رو داخل متغییر canvas ذخیره کن . سپس باید محیط canvas رو مشخص کنیم . context یا محیط ، همون فضایی هست که اشکال ترسیمی در اون به نمایش درمیاد . در حال حاضر تنها محیط دو بعدی  (۲d) در مرورگرها پشتیبانی میشه . مستندات w3c ، محیط رو در آبجکت canvasRenderingContent2D تعریف میکنه و اغلب متدهایی که برای ترسیم شکل استفاده می کنیم ، متدهایی از همین آبجکت هستند .

ما محیط رو با فراخوانی متد getContext و ارسال مقدار ۲d به اون ، بدست میاریم ، زیراکه هدف ما ترسیم تصاویر دوبعدی هست . حالا تابع خودمون رو گسترش میدیم :

 در کد بالا در ابتدا irocanvas رو داخل متغییر canvas ذخیره کردیم ، سپس محیط و فضای درون irocanvas رو داخل متغییر context ذخیره کردیم .

حالا باید برای رسم شکل از رنگ ها استفاده کنیم . برای اختصاص دادن رنگ ها به اشکال از strokeStyle و یا  fillStyle استفاده می کنیم . هر دو متد strokeStyle و fillStyle یک تا سه مقدار رو قبول می کنند که عبارتند از :

–          رنگ

–          CanvasGradient

–          یا  CanvasPattern

حالا در ابتدا رنگ خطوط رو مشخص می کنیم :

 حالا میخوایم داخل این مربع رو زرد کنیم :

 مقادیر رنگ رو میتونید به هر سه شکل مقدار RGB ,  کلمات کلیدی مثل red , مقادیر hex مثل #۰۰۰ استفاده کنید .

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

حالا برای اینکار باید به شکلمون مختصات بدیم . این کار رو با متدهای  fillRect و  strokeRect انجام میدیم . هر دو متد مختصات X و  Y قبول می کنند ، و توسط این مقادیر مشخص می کنید که رسم شکل و رنگ آمیزی داخل شکل از چه نقطه ای شروع بشه . علاوه بر اون میتونید طول و عرض چهار ضلعی رو مشخص کنید .

ما نقطه ی شروع رسم شکل و رنگ آمیزی رو مشخص می کنیم ، این مقدار رو ۱۰ پیکسل از بالا ۱۰ پیکسل از سمت چپ محدوده ی canvas تعریف می کنیم :

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

 حالا براتون کدهارو بصورت کامل قرار میدم تا کمی بهتر این موضوع رو درک کنید :

 نتیجه ی تلاشمون تا الان به شکل زیر درومده :

canvas

تبریک میگم شما تونستید یک canvas برای خودتون ترسیم کنید 🙂 امیدوارم تونسته باشم بطور واضح این مساله رو بهتون آموزش بدم . خوب حالا به ادامه ی آموزش میریم .

سیستم مختصات canvas

در سیستم مختصات canvas نقطه بالا و سمت چپ ، نقطه شروع و (۰,۰) هست . اگر ما شکل رو ۱۰۰ پیکسل در ۱۰۰ پیکسل در نظر بگیریم یعنی طول و عرض ۱۰۰ پیکسل ، نقطه ی پایانی ما میشه نقطه پایین سمت راست یعنی (۱۰۰,۱۰۰) و در نهایت مختصات ما میشه (۰,۰,۱۰۰,۱۰۰) .

در مثالی که باهم انجام دادیم ، نقطه ی شروع ما ۱۰ پیکسل از بالا و ۱۰ پیکسل از سمت چپ بود که در نتیجه مختصات ما شد (۱۰,۱۰,۱۰۰,۱۰۰) .

خوب جلسه ی ما تا اینجا به اتمام میرسه ، ادامه این مبحث آموزشی رو میتونید در جلسه ی بعد دنبال کنید 😉

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

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • طراح جوان

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

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟