آموزش تگ Canvas در HTML

آموزش تگ Canvas در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ canvas
در HTML به صورت کامل آشنا بشید.
تگ Canvas در HTML
کابرد تگ canvas
در واقع بدین شکل است که مانند یک ظرف است که از آن برای نگهداری از اشکال گرافیکی استفاده میکنند. این اشکال گرافیکی اغلب توسط زبان جاوا اسکریپت ایجاد می شوند.
دو مثال برای تگ canvas در HTML
در ادامه دوره آموزشی HTML CSS پروژه محور به دو تا از مثال های این تگ میپردازیم که شما عزیزان درک بهتری از این تگ داشته باشید.
مثال اول: استفاده از تگ canvas
بدون استفاده از کد های CSS
<canvas id="mycanvas"></canvas>
مثال دوم : نمایش متن داخل تگ canvas
var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); ctx.font="30px Comic Sans MS"; ctx.fillStyle = "blue"; ctx.textAlign = "center"; ctx.fillText("wppush", canvas.width/2, canvas.height/2);
راستی اگر دنبال آموزش html css پروژه محور در تبریز هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید
پشتیبانی مرورگرها از تگ Canvas
در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ canvas
در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
جدول صفات تگ Canvas در HTML
جدول زیر به شما کمک میکند تا صفات تگ canvas
را به همراه مقادیری را که میتوانیم در این تگ استفاده کنیم را مشاهده نماییدم.
پشتیبانی تگ Canvas از صفات و رویدادهای عمومی
تگ canvas
قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- از تگ
canvas
تنها برای نگهداری اشکال گرافیکی استفاده میشود که همانند یک ظرف عمل میکند. اشکال با جاوا اسکریپت ایجاد میگردند.
دستورات پیش فرض CSS
اغلب مرورگرها تگ canvas
را به شکل کد های CSS همچون دستورات زیر نمایش میدهند. شما عزیزان نیز میتوانید بدون هیچ گونه تغییری از این کد ها استفاده کنید.
canvas { height: 150px; width: 300px; }
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید