آموزش تگ canvas در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ canvas در HTML با من همراه باشید.
Free-Learn
تگ Canvas در HTML
تگ canvas تگی است در واقع همانند یک ظرف برای نگهداری اشکال گرافیکی ، که این اشکال گرافیکی معمولا توسط اسکریپت ها (جاوا اسکریپت) ایجاد می شوند.
Free-Learn
مثال از تگ canvas در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <canvas id="mycanvas"> شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند </canvas> <script> var c = document.getElementById("mycanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#CDDC39"; ctx.fillRect(0, 0, 80, 80); </script> </body> |
مثال شماره ۲ : نمایش متن درون تگ Canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<body> <canvas id="myCanvas" width="200" height="120" style="border:1px solid #d3d3d3;"> شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); ctx.font="30px Comic Sans MS"; ctx.fillStyle = "green"; ctx.textAlign = "center"; ctx.fillText("Free-Learn", canvas.width/2, canvas.height/2); </script> </body> |
مثال شماره ۳ : نمایش عکس درون تگ Canvas : در مثال زیر اول یک تصویر (عکس) با استفاده از تگ img در صفحه قرار دادم سپس کاری کردم که با کلیک بروی دکمه اون عکس درون ظرف (Canvas) نمایش داده شود.
نکته ای که در مثال زیر است اینه که بنده با استفاده از دستورات CSS عکس رو مخفی کردم که در حالت عادی در صفحه نمایش داده نشود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <canvas id="mycanvas" width="320" height="200" style="border:3px solid #d3d3d3;"> شرمنده مثه اینکه مرورگر شما از این تگ پشتیبانی نمیکند </canvas> <button type="button" onclick="myimg()">برای نمایش عکس درون کنویس کلیک کنید</button> <script> function myimg() { var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("myimage"); ctx.drawImage(img, 5, 5); } </script> </body> |
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 زیر نمایش میدهند.
|
1 2 3 4 |
canvas { height: 150px; width: 300px; } |
