عنصر کانواس
عنصر کانواس بخشی از HTML5 است که امکان ترسیم پویا و اسکریپتی اشکال ۲ بعدی و تصویرهای بیت‌مپی را فراهم می‌کند. این یک مدل سطح پایینِ رویه‌ای است که یک بیت‌مپ را به روز می‌کند. همچنین از طریق WebGL می‌توان اشکال سه‌بعدی و تصاویر را هم با آن ایجاد کرد.
نمونه
[ویرایش]کد زیر باعث ایجاد یک عنصر کانواس در یک صفحه اچ‌تی‌ام‌ال می‌شود:
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
با استفاده از جاوا اسکریپت شما می‌توانید روی کانواس نقاشی کنید:
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(30, 30, 50, 50);
این کد یک مستطیل قرمز را بر روی صفحه رسم می‌کند.
کانواس در مقابل گرافیک برداری مقیاس پذیر (SVG)
[ویرایش]اس‌وی‌جی یک استاندارد قدیمی‌تر برای طراحی اشکال در مرورگرهای است. با این حال، برخلاف کانواس که از گرافیک شطرنجی استفاده می‌کند، SVG برداری است، به طوری که هر یک شکل کشیده شده به به عنوان یک شی در مدل شیءگرای سند نمایش داده می‌شود که در انتها به بیت‌مپ تبدیل می‌شود. این به این معنی است که اگر ویژگی‌های یک شی SVG تغییر کند، مرورگر می‌تواند به‌طور خودکار آن شی را دوباره تغیر دهد.
اما از سوی دیگر، اشیا کانواس در حالت فوری کشیده می‌شوند. در مثال کانواس بالا، یک‌بار مستطیل مدلی را رسم می‌کند که توسط سیستم کشیده شده‌است. اگر موقعیت آن تغییر کند، کل صحنه باید مجدداً ترسیم شود، از جمله هر شی که ممکن است توسط مستطی لپوشش داده شده‌باشد. اما در مورد SVG، می‌توان به سادگی ویژگیِ موقعیت مستطیل را تغییر داد و مرورگر مشخص می‌کند که چگونه آن را بازنمایی کند.
تصاویر اس‌وی‌جی در اکس‌ام‌ال نمایش داده می‌شوند، و صحنه‌های پیچیده را می‌توان با ابزارهای ویرایش اکس‌ام‌ال به وجود آورد.
SVG می‌توان از گردانندگان رویداد (event handlers) استفاده کند و به هر شی یک رویداد بافزاید و مثلاً یک مستطیل به رویداد onClick واکنش نشان دهد. اما در کانواس اینطور نیست و برای ایجاد یک رویداد onClick در آن، باید مختصات محل کلیک کردن موس را دریافت و آن را با مختصات مستطیل رسم شده مقایسه کرد تا مشخص کرد که آیا کلیک صورت گرفته یا خیر.
از نظر مفهومی، کانواس یک API سطح پایین‌تر است که برای مثالبا آن می‌توان یک موتورِ نمایشِ SVG ساخته شود.
پشتیبانی مرورگرها
[ویرایش]این عنصر توسط نسخه‌های فعلی موزیلا فایرفاکس، گوگل کروم، اینترنت اکسپلورر، سفاری، اوپرا[۱] و مایکروسافت اج پشتیبانی می‌شود.[۲]
جستارهای وابسته
[ویرایش]منابع
[ویرایش]- ↑ Sucan, Mihai (4 Feb 2010). "SVG or Canvas? Сhoosing between the two". Opera Software. Archived from the original on 23 June 2010. Retrieved 3 May 2010.
- ↑ "Canvas, Microsoft Edge documentation".
پیوند به بیرون
[ویرایش]- The
canvaselement, W3C, 2014-10-28, retrieved 2015-01-09 - HTML Canvas 2D Context, W3C, 2014-08-21, retrieved 2015-01-09
- بوم توضیحات در WHATWG برنامه‌های کاربردی وب پیش نویس مشخصات
- بوم مرجع صفحه در اپل توسعه دهندگان اتصال
- پایه بوم آموزش در Opera توسعه دهنده جامعه
- بوم آموزش مقدماتی و صفحه در Mozilla Developer center بایگانی‌شده در ۳ اوت ۲۰۱۲ توسط Wayback Machine
| سمت سرور |
| ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| سمت کاربر |
| ||||||||||||
| شرکتهای خدمات وب | |||||||||||||
| موضوعات |
| ||||||||||||
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.
