آموزش تگ canvas در HTML

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

آموزش تگ canvas در HTML

Free-Learn

تگ Canvas در HTML

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

Free-Learn

مثال از تگ canvas در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : نمایش متن درون تگ Canvas

امتحان کنید

مثال شماره ۳ : نمایش عکس درون تگ Canvas : در مثال زیر اول یک تصویر (عکس) با استفاده از تگ img در صفحه قرار دادم سپس کاری کردم که با کلیک بروی دکمه اون عکس درون ظرف (Canvas) نمایش داده شود.

نکته ای که در مثال زیر است اینه که بنده با استفاده از دستورات CSS عکس رو مخفی کردم که در حالت عادی در صفحه نمایش داده نشود.

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ canvas در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی ۴٫۰ ۲٫۰ ۹٫۰ ۳٫۱ ۹٫۰

Free-Learn

جدول صفات تگ canvas در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

نام صفت مقدار توضیح
height pixels برای مشخص کردن اندازه ارتفاع Canvas
width pixels برای مشخص کردن اندازه عرض Canvas

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ canvas از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تگ canvas یک تگ جدید/اضافه شده در HTML5 می باشد.

هر متنی که درون تگ canvas قرار بگیرد، در صورتی که مرورگرها از این تگ پشتیبانی نکنند آن متن به کاربر نمایش داده می شود و کاربر میتواند متوجه شود که مرورگرش از تگ canvas پشتیبانی نمیکند.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ canvas را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.


Free-Learn