آموزش Canvas در HTML رایگان — به زبان ساده و گام به گام

آموزش Canvas در HTML از اهمیت بالایی برخوردار است چرا که، Canvas به عنوان یک عنصر HTML برای رسم گرافیک (نگاره‌سازی | Draw Graphics) به وسیله اسکریپت‌نویسی (معمولا با جاوا اسکریپت)‌ مورد استفاده قرار می‌گیرد. با آموزش Canvas می‌توان نمودار رسم کرد، تصاویر را ادغام کرد و تصاویر متحرک (انیمیشن) ساده و نسبتاً‌ پیچیده ایجاد کرد. در مطلب «آموزش Canvas در HTML» سعی شده است موضوعات و سرفصل‌های اصلی و بنیادی در خصوص آموزش Canvas به صورت گام به گام و با بیانی ساده ارائه شود.

Canvas چیست ؟

Canvas یکی از محبوب‌ترین ویژگی‌ها و امکانات HTML5 است. توسعه‌دهندگان از Canvas برای ساخت وب‌اپلیکیشن‌های فاخر استفاده می‌کنند. HTML یک زبان نشانه‌گذاری است که امکان ایجاد و ساخت بخش‌ها (Section)، پاراگراف‌ها، عنوان‌‌ها، لینک‌ها و سایر موارد را برای صفحات وب و برنامه‌های کاربردی فراهم می‌کند. کاربران می‌توانند از وب‌سایت‌های ساخته شده با Canvas بدون نیاز به افزونه‌های مرورگر مثل ادوبی فلش پلیر استفاده کنند.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

اکثر مرورگرهای امروزی مثل کروم، فایرفاکس، سافاری، اوپرا (Opera) و اینترنت اکسپلورر نسخه نُه و ده  از Canvas پشتیبانی می‌کنند. عنصر Canvas در HTML برای رسم نگاره‌ (گرافیک | Graphic) در حین اجرا (On The Fly) با استفاده از جاوا اسکریپت (JavaScript) استفاده می‌شود. عنصر Canvas تنها یک محفظه نگهدارنده (Container) برای نگاره‌ است. برای رسم نگاره‌ باید از جاوا اسکریپت استفاده کرد. Canvas دارای متدهای (Method) بسیاری برای رسم خط‌سیر (Path)، محفظه (Box)، دایره، متن و افزودن عکس است.

تاریخچه Canvas

جهت درک اهمیت آموزش Canvas داشتن اطلاعاتی در خصوص تاریخچه آن می‌تواند مفید باشد. Canvas در ابتدا توسط شرکت اپل برای استفاده در قطعه وب‌کیت (WebKit) مک‌اواس ده (Mac OS X) در اوایل سال 1383 با هدف بهبود اپلیکیشن‌هایی مثل ویجت‌های Dashboard و مرورگر سافاری معرفی شد.

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

Canvas در نسخه ۱/۸ مرورگرهای Gecko در سال ۱۳۸۴ و در مرورگر اوپرا‌ در سال 1385 به کار گرفته شد و توسط کارگروه تعیین تکنولوژی نحوه استفاده از ابرمتن وب (Web Hypertext Application Technology Working Group |‌ WHATWG) برای مشخصات نسل بعدی فناوری‌های وب استانداردسازی شد. امروزه،‌ تمامی مرورگرهای برجسته از Canvas پشتیبانی می‌کنند.

پیش نیاز های Canvas چیست ؟

آشنایی با HTML و جاوا اسکریپت پیش‌نیازهای اساسی Canvas هستند. قبل از شروع آموزش Canvas باید پیش‌نیازهای لازم را فرا گرفت. همان‌طور که بیان شد، Canvas یک عنصر در HTML5 است. بنابراین، آشنایی با HTML و خصوصاً HTML5 به عنوان پیش‌نیاز، قبل از شروع آموزش Canvas ضروری است.

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

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

جاوا اسکریپت چیست ؟

جاوا اسکریپت (JavaScript |‌ JS) یک زبان برنامه‌نویسی است که امکان پیاده‌سازی ویژگی‌های پیچیده را در صفحات وب فراهم می‌کند. جاوا اسکریپت به کاربران اجازه می‌دهد با صفحات وب تعامل داشته باشند. از فریم‌وُر‌ک‌های متعدد جاوا اسکریپت برای ساخت اپلیکیشن‌های وب و موبایل استفاده می‌شود. همچنین، JavaScript برای ساخت وب‌سرورها، توسعه کاربردهای مرتبط با سرور و توسعه بازی‌های کامپیوتری نیز به کار گرفته می‌شود.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

Canvas برای چه کاری استفاده می‌شود ؟

به طور رسمی، Canvas یک طرح بیتی (Bitmap) مبتنی بر وضوح تصویر (resolution) است که می‌توان از آن برای پردازش نمودار‌ها، نگاره‌های بازی یا تصاویر بصری در حین اجرا استفاده کرد. به بیان ساده، با کمک یک عنصر Canvas متشکل از جاوا اسکریپت و HTML5، می‌توان اشکال دوبعدی و تصاویر بیت‌مپ را پردازش کرد. یک صفحه وب، ممکن است حاوی چند عنصر Canvas‌ باشد. هر Canvas دارای یک شناسه است که با استفاده از این شناسه می‌توان از طریق جاوا اسکریپت به آن دسترسی پیدا کرد.

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

هر عنصر Canvas دارای یک زمینه (Context) دو بعدی است. این زمینه، حاوی تعدادی شیٔ، خصوصیت (Properties) و متُد است. برای رسم روی یک Canvas، باید به زمینه آن ارجاع داده شود. زمینه، دسترسی به تنظیمات و متدهای آن Canvas‌ را فراهم می‌کند. هر عنصر Canvas، دو موقعیت x و y دارد که x مختصات افقی و y مختصات عمودی است. تصویر زیر مختصات Canvas را نمایش می‌دهد.

تفاوت Canvas با SVG چیست؟

در آموزش Canvas درک تفاوت‌ها میان عنصرهای SVG و Canvas اهمیت دارد. SVG یک قالب گرافیکی برداری مبتنی بر XML است. می‌توان با استفاده از CSS‌ به SVG استایل (سبک | Style) اضافه کرد و همچنین، با استفاده از SVG DOM می‌توان رفتار پویا (رفتار دینامیک | Dynamic Behavior) افزود.

فیلم آموزش رسم اشکال گرافیکی با SVG در فرادرس

کلیک کنید

از طرف دیگر، Canvas مبتنی بر bitmap است و امکان رسم نگاره‌ها و اشکال را از طریق جاوا اسکریپت فراهم می‌کند. به مانند SVG، می‌توان استایل‌ها و رفتارهای دینامیک را به Canvas نیز اضافه کرد. در ادامه، برخی دلایل برتری Canvas نسبت به SVG‌ فهرست شده است.

1. وقتی صحبت از رسم نگاره‌های پیچیده می‌شود، Canvas سریع‌تر عمل می‌کند.
2. در مورد Canvas می‌توان تصاویر را ذخیره کرد؛ درحالی‌که، در SVG این کار امکان‌پذیر نیست.
3. همه چیز در Canvas به صورت یک پیکسل (Pixel) است.

اما، SVG‌ برتری‌هایی هم دارد که در ادامه فهرست شده‌ است.

1. با توجه به اینکه SVG مستقل از رزلوشن است، می‌تواند در صفحه نمایش‌ها با رزولوشن‌های متفاوت اندازه را تطبیق دهد.
2. در SVG‌ به دلیل اینکه ماهیت XML وجود دارد، فرآیند هدف قرار دادن عنصرهای مختلف آسان‌تر است.
3. SVG در انیمیشن‌های پیچیده به خوبی عمل می‌کند.

بهتر است از کدامیک استفاده شود؟

برای توسعه نگاره‌های (Graphics) وابسته به رزلوشن تعاملی (Interactive) و مبتنی بر بردار (Vector-Based)، بهتر است SVG را انتخاب کرد. اگر نیاز به پردازش بسیار سریع نگاره‌ها وجود داشته باشد، مثلاً در بازی‌های کامپیوتری، یا تمایلی به کار با XML وجود نداشته باشد، می‌توان از Canvas استفاده کرد.

فیلم آموزش اینک اسکیپ – طراحی و ویرایش تصاویر وکتور و برداری با Inkscape در فرادرس

کلیک کنید

Canvas‌ و شتاب سخت‌افزاری

با وجود مرورگرهای دارای قابلیت شتاب سخت‌افزاری (Hardware Acceleration) به اندازه کافی رضایت توسعه‌دهندگان جلب می‌شود. زیرا این مرورگرها، تصاویر و انیمیشن‌های Canvas را با سرعت مناسبی برای کاربران پردازش می‌کنند و تجربه کاربری (User Experience) مطلوبی پدید می‌آورند. در نگاهی عمیق‌تر، می‌توان به این مسئله اشاره کرد که کامپیوترهای دسکتاپ امروزی علاوه‌بر داشتن CPU (واحد پردازش مرکزی | Central Processing Unit) دارای GPU (واحد پردازش گرافیکی | Graphical Processing Unit) نیز هستند.

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

بنابراین، وقتی زمان پردازش تصاویر و انیمیشن‌های سریع فرا می‌رسد، عملیات لازم به وسیله GPU انجام شده و پس از آن، CPU به انجام باقی وظایف ادامه می‌دهد. حاصل این همکاری، عملکرد گرافیکی شتاب‌یافته (Accelerated Graphics Performance) است. در حال حاضر نسخه‌های به‌روز کروم، فایرفاکس و اینترنت اکسپلورر از این قابلیت پشتیبانی می‌کنند.

API دو بعدی Canvas

API (واسط برنامه‌نویسی کاربردی |‌ Aplication Programing Interface) دو بُعدی Canvas، این امکان را به وجود می‌آورد که روی یک عنصر Canvas، تصاویر را ترسیم و عکس‌ها را مدیریت کرد. برای ارجاع به زمینه Canvas، از متُد getContext استفاده می‌شود. این متد تنها یک پارامتر به نام «2d» دارد. هر Canvas دارای زمینه مربوط به خودش است.

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

بنابراین، اگر در یک صفحه چند عنصر Canvas وجود داشته باشد، باید برای هر یک از زمینه‌هایی که قصد کار با آن‌ها وجود دارد، امکان ارجاع وجود داشته باشد. متد getContext یک زمینه ترسیم را روی Canvas بازمی‌گرداند. به غیر از getContext تعداد زیادی توابع و متدهای دیگر نیز در API دو بُعدی Canvas در دسترس است (توابع یک شیٔ در جاوا اسکریپت متُد نامیده می‌شوند). برخی از متدهای قابل توجه Canvas در ادامه فهرست شده‌اند.

متدهای مهم Canvas

در این بخش از مطلب آموزش Canvas برخی از متدهای مهم و قابل توجه Canvas دسته‌بندی و معرفی شده‌اند.