این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ canvas در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ canvas در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Canvas در HTML
تگ canvas تگی است در واقع همانند یک ظرف برای نگهداری اشکال گرافیکی ، که این اشکال گرافیکی معمولا توسط جاوا اسکریپت ایجاد می شوند.
Free-Learn
مثال از تگ canvas در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 |
<canvas id="mycanvas"></canvas> |
مثال شماره ۲ : نمایش متن درون تگ Canvas
|
1 2 3 4 5 6 7 8 9 10 |
<script> var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); ctx.font="30px Comic Sans MS"; ctx.fillStyle = "blue"; ctx.textAlign = "center"; ctx.fillText("Free-Learn", canvas.width/2, canvas.height/2); </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ canvas در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ canvas در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| height | pixels | برای مشخص کردن اندازه ارتفاع Canvas |
| width | pixels | برای مشخص کردن اندازه عرض Canvas |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ canvas از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ
canvasفقط یه ظرف برای نگهداری اشکال گرافیکی هست، خوده اشکال با جاوااسکریپت ایجاد میشن.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ canvas را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 |
canvas { height: 150px; width: 300px; } |
