امروز می‌خواهیم یکی از قدرتمند‌ترین عناصر HTML را به شما معرفی کنیم. عنصری که بعد از حدود یک دهه همچنان توسعه داده شده و فناوری‌های جدید روی آن پیاده می‌شود! با وجود کاربردهای فراوان این عنصر، آموزش‌های بسیار کمی به زبان فارسی برای آن وجود دارد و به همین دلیل تصمیم گرفتیم این دوره‌ی آموزشی را برای شما عزیزان تهیه کنیم.
عنصر Canvas چیست؟
به طور خلاصه، این عنصر به صورت یک عکس در صفحه عمل می‌کند، اما تفاوت اصلی آن با عکس (عنصر img) این است که می‌توان ترسیمات درون این عکس را تغییر داد و برنامه‌نویسی کرد! به عبارت دیگر، این عنصر به عنوان یک واسطه برای ایجاد گرافیک شناور در مرورگر استفاده می‌شود. امکانات این عنصر تا حدودی شبیه SVG است اما تفاوت‌هایی اساسی نیز با آن دارد.
به طور کلی، با استفاده از فناوری‌هایی که بر روی این عنصر پیاده شده‌اند می‌توان تصاویر دوبعدی و سه‌بعدی، انیمیشن، شبیه‌سازی، بازی و… ساخت. کاربردهای این عنصر به این موارد ختم نمی‌شود؛ بلکه می‌توان از آن در ساخت نرم‌افزار‌های گرافیکی آنلاین یا حتی توسعه‌ی هوش مصنوعی نیز استفاده کرد! برای نمونه TensorFlow که یک کتابخانه برای هوش مصنوعی در مرورگر است، از فناوری‌های مربوط به این عنصر بهره می‌گیرد.
فناوری‌های Canvas
پیش از آغاز کار با این عنصر لازم است اطلاعاتی کوتاه درباره‌ی استاندارد‌هایی که بر روی این عنصر پیاده شده‌اند داشته باشیم. این عنصر از چندین فناوری استاندارد و آزمایشی پشتیبانی می‌کند که به مرور زمان به این عنصر اضافه شده‌اند. از آنجایی که استاندارد‌های آزمایشی معمولا پشتیبانی مناسبی ندارند، از بازگو کردن آن‌ها خودداری می‌کنیم.
همچنین لازم به ذکر است که هرکدام از این استاندارد‌ها مستقل از یکدیگر هستند؛ یعنی اگر پشتیبانی مرورگرها از یکی پایین است، مشکلی در استفاده از دیگر استاندارد‌ها ایجاد نمی‌کند. در حال حاضر دو فناوری خیلی مهم (در آینده‌ی نزدیک سه فناوری!) توسط این عنصر پشتیبانی می‌شوند که به توضیح هر یک می‌پردازیم:
Canvas 2D
واسط کاربری دوبعدی که معمولا با همان نام Canvas شناخته می‌شود. با استفاده از آن می‌توان اشکال دوبعدی پایه، خط، سایه، عکس و… رسم کرد. این واسط رفتاری مشابه SVG دارد و حتی برخی متدهای آن از استانداردی یکسان با SVG استفاده می‌کنند. هدف اصلی این دوره، آموزش این فناوری است و در ادامه بیشتر و بهتر به آن خواهیم پرداخت. این فناوری نسبت به دیگر واسط‌های گرافیکی در مرورگر این برتری‌ها را دارد:
سرعت بالا
ترسیمات درون Canvas به صورت raster یا شطرنجی (نقطه مقابل ترسیمات برداری که SVG از آن استفاده می‌کند) است و به همین دلیل سرعت بالایی دارد.
کدنویسی آسان و نسبتا قابل فهم
ممکن است در ابتدا سخت به نظر برسد اما Canvas یکی از ساده‌ترین واسط‌های گرافیکی برای یادگیری است! به‌ویژه اگر آن را با WebGL مقایسه کنیم!
پشتیبانی مناسب
هرچند این استاندارد تغییراتی داشته، اما تمام آن تغییرات نیز از پشتیبانی عالی برخوردارند و هیچ نگرانی از بابت پشتیبانی مرورگرها وجود ندارد.
عدم وجود DOM
شاید در ابتدا به عنوان یک ضعف به این مورد نگاه کنید اما در واقعیت این ویژگی یکی از عوامل سرعت بسیار بالای این فناوری است. نبود ساختار DOM یعنی برنامه‌نویس می‌تواند اطلاعات شکل‌ها را به صورت دستی ذخیره کند؛ به این ترتیب می‌تواند اطلاعات را متناسب با الگوریتم‌های مختلف ذخیره کند که باعث سرعت و بازده بالاتری می‌شود.
البته مانند هر چیز دیگری، این فناوری معایبی نیز دارد. به جز برخی موارد خاصی که درون مرورگرها پیش می‌آید و بیشتر آن‌ها راه‌حل دارند، می‌توان به این موارد به عنوان ضعف‌های اصلی Canvas اشاره کرد:
سرعت پایین!
شاید این مورد کمی عجیب به نظر برسد، چون سرعت بالا را به عنوان یکی از برتری‌های Canvas گفتیم، اما باید بدانید این فناوری در همه‌چیز سریع نیست! موارد نه‌چندان کمی وجود دارند که سرعت Canvas در آن‌ها افتضاح است! به علاوه اگر مراقب نباشید و نکاتی که بعدها بررسی می‌کنیم را رعایت نکنید هم ممکن است به دردسر بیوفتید!
محدود بودن به دنیای دوبعدی
متاسفانه این فناوری فقط در دو بعد قابل استفاده است؛ البته زیاد مهم نیست چون واسط‌های سه‌بعدی جداگانه‌ای وجود دارند که سرعت بالایی نیز دارند؛ تنها مشکل یادگیری آن فناوری‌هاست!
نبود ابزار‌های مناسب برای کار با متن
در Canvas هم می‌توان متن نوشت اما دردسر نوشتن دو خط متن بیشتر از آن است که تصور می‌کنید! متاسفانه ابزار‌های کار با آن بسیار کم هستند و حتی به گرد پای امکانات عنصر text در SVG نمی‌رسند!
استاندارد اضافه
منظور از استاندارد اضافه، کلاس Path2D است که چند سال بعد به Canvas اضافه شد و پشتیبانی آن به نسبت کمتر (همچنان خیلی خوب) است. پس از پایان آموزش‌ها به این کلاس نیز خواهیم پرداخت البته استفاده از این کلاس به جز در مواردی برتری خاصی نسبت به استاندارد قدیمی ندارد.
پشتیبانی مرورگرها از Canvas
WebGL
دومین فناوری مهم این عنصر WebGL نام دارد و برای ترسیمات دوبعدی و سه‌بعدی استفاده می‌شود. این فناوری پایه و اساس تمام شبیه‌سازی‌ها، بازی‌ها و دیگر مواردی است که امروزه در مرورگر خود می‌بینید. این استاندارد بر پایه‌ی OpenGL تعریف شده و با استفاده از آن می‌توان مستقیما برنامه را روی پردازنده‌ی گرافیکی (GPU) اجرا کرد.
در اصل این فناوری ابتدا به عنوان WebGL به مرورگرها اضافه شد اما چندین سال بعد نسخه‌ی دوم آن با عنوان WebGL 2.0 نیز اضافه شد که البته پشتیبانی کمتری از نسخه‌ی اول دارد. نسخه‌ی دوم نسبت به نسخه‌ی اول تغییراتی نداشته و فقط امکاناتی به آن اضافه شده. ظاهرا قرار نیست نسخه‌ی سومی از این فناوری به مرورگرها اضافه شود و علت آن نیز فناوری جدیدی است که هم‌اکنون در حال توسعه است و به توضیح مختصری از آن نیز خواهیم پرداخت.
این واسط تفاوت‌های بسیار زیادی با Canvas 2D دارد و به خاطر همین تفاوت نه‌تنها بیشتر مشکلات Canvas 2D را حل کرده، بلکه دنیای سه‌بعدی را نیز به مرورگرها آورده! از برتری‌های این فناوری می‌توان به این موارد اشاره کرد:
دنیای سه‌بعدی
در حال حاضر تنها راه ایجاد گرافیک سه‌بعدی مناسب در مرورگر، استفاده از WebGL است. این فناوری امکانات فراوانی چه در ترسیمات دوبعدی و چه سه‌بعدی (یا ترکیب هر دو!) دارد.
نمونه‌ای از ترسیمات WebGL:
سرعت بسیار بالا
از آنجایی که برنامه‌ی نوشته شده در WebGL روی پردازنده‌ی گرافیکی اجرا می‌شوند، سرعت برنامه‌ها بسیار بالا خواهد بود. برنامه‌ای که توسط WebGL نوشته شده باشد، چند صد برابر تا چند هزار برابر سریع‌تر از برنامه‌ی مشابه در Canvas 2D خواهد بود!
پشتیبانی بسیار مناسب
هرچند این فناوری بعد از Canvas 2D روی عنصر Canvas پیاده شد اما همچنان پشتیبانی بسیار مناسبی از سمت مرورگرها دارد. مشکل اصلی نسخه‌ی دوم این فناوری است که تا چند سال دیگر هیچ نگرانی بابت آن نخواهد بود!
شباهت فراوان با OpenGL
از آنجایی که این فناوری بر پایه‌ی OpenGL ساخته شده، با یادگیری WebGL می‌توانید OpenGL را نیز یاد بگیرید. یک تیر و دو نشان! در واقع این فناوری بر اساس OpenGL ES ساخته شده اما برای سادگی مطلب گفتیم OpenGL!
بله! حتی WebGL هم معایبی دارد! متاسفانه سرعت بسیار بالا و قدرت فراوان بهایی دارند که باید با یادگیری WebGL بپردازید! در زیر به مهم‌ترین مشکلات WebGL می‌پردازیم:
پیچیدگی فراوان
متاسفانه سرعت بسیار زیاد این فناوری به خاطر سطح‌پایین بودن آن است (یعنی به زبان ماشین نزدیک‌تر است). یادگیری WebGL نسبت به Canvas 2D سخت‌تر است. انجام ساده‌ترین کارها هم ممکن است ده‌ها خط کد نیاز داشته باشد. هرچند کتابخانه‌هایی برای این کارها وجود دارند اما در همه‌جا نمی‌توانند مفید باشند.
یک زبان اضافه
برنامه‌هایی که WebGL در پردازنده‌ی گرافیکی اجرا می‌کند shader نام دارند که شبیه به زبان C هستند. یادگیری آن‌ها چندان سخت نیست اما به هر حال چالش‌های خود را دارند.
فناوری ناقص
هرچند WebGL در مرورگرها پیاده شده و امکانات زیادی هم دارد، اما باید بدانید امکانات زیادی در OpenGL وجود داشته که وارد WebGL نشده‌اند. عدم وجود برخی از این امکانات باعث دردسر شده و حتی ساخت برخی شبیه‌سازی‌ها را نیز غیرممکن می‌سازد. متاسفانه WebGL 2.0 نیز تغییر چندانی در این موضوع ایجاد نمی‌کند.
عدم توسعه‌ی این فناوری
این فناوری دیگر توسعه داده نمی‌شود و به جای آن فناوری جدیدی به نام WebGPU در حال توسعه است که تا چند سال دیگر توسط مرورگرها پشتیبانی خواهد شد. این بدین معنی نیست که WebGL منقضی می‌شود؛ WebGL به عنوان یک فناوری قدرتمند در مرورگرها باقی خواهد ماند اما دیگر توسعه داده نمی‌شود.
پشتیبانی از WebGL و WebGL 2.0
WebGPU فناوری آینده!
جدیدترین فناوری سه‌بعدی که هم‌اکنون در حال توسعه است. این فناوری برتری‌های غیرقابل چشم‌پوشی نسبت به WebGL دارد و علت توسعه‌ی آن به جای WebGL نیز همین است. پیچیدگی WebGPU نسبت به WebGL بیشتر بوده و سرعت و امکاناتش نیز به همان نسبت بیشتر است.
WebGPU بر اساس Vulkan که خود نیز یک فناوری جدید است توسعه یافته. کد WebGPU به گونه‌ای است که می‌تواند مستقیما به کد Vulkan تبدیل شود و این یک برتری بسیار بزرگ نسبت به WebGL است.
پشتیبانی از WebGPU
نتیجه‌گیری
در این مقاله سعی کردیم فناوری‌های مختلفی که بر روی عنصر Canvas پیاده شده‌اند را با برتری‌ها و ضعف‌های هرکدام توضیح دهیم. در ادامه‌ی این دوره به آموزش Canvas 2D می‌پردازیم. تنها یک نکته باقی می‌ماند، تمام این فناوری‌ها، با ضعف‌ها و برتری‌هایشان سال‌هاست استفاده می‌شوند و خواننده‌ی عزیز نباید با خواندن برتری‌های WebGL از یادگیری Canvas 2D دلسرد شود! امیدواریم در ادامه‌ی این دوره همراه ما باشید.
چرا باید این دوره را دنبال کنید؟
ممکن است برخی از دوستان که در حال خواندن این مقاله هستند، از پیش با Canvas آشنایی داشته باشند و از خود بپرسند: «چه دلیلی وجود دارد که من این آموزش را دنبال کنم؟» پاسخ این است که دیگر آموزش‌ها فقط به آموزش موارد ابتدایی می‌پردازند اما در این دوره‌ی آموزشی، پس از آموزش موارد ابتدایی شروع به ساخت پروژه‌های بزرگ و پیچیده می‌کنیم، از شبیه‌سازی و بهینه‌سازی، تا بازی آنلاین!
سوال داری؟ برو به پنل پرسش و پاسخ