تگ canvas در HTML

با استفاده از تگ canvas در HTML می توان اشکال هندسی را رسم کرد ، معمولاً این اشکال هندسی توسط اسکریپت های Javascript نوشته می شود.

مثال

<canvas id="myCanvas">مرورگر شما تگ canvas را پشتیبانی نمی کند.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 100);
</script>

تست آنلاین کد

تعریف و کاربرد

از تگ canvas در HTML برای ترسیم اشکال گرافیکی که با اسکریپت نویسی طراحی می شوند ( معمولاً توسط Javascript ) استفاده می شود.

عنصر canvas همچون ظرفی برای نگهداری اشکال گرافیکی هست و به تنهایی ظاهر خاصی ندارد ، برای ایجاد اشکال گرافیکی باید توسط Javascript طرح را اسکریپت نویسی کنید.

تمامی متن هایی که درون تگ canvas قرار دارد در صورتی که javascript مرورگر کاربر غیر فعال باشد یا اینکه مرورگر کاربر تگ <canvas> را پشتیبانی نکند به نمایش در خواهد آمد.

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

اعداد موجود در جدول اولین نسخه مرورگر را مشخص می کنند که به طور کامل عنصر را پشتیبانی می کند.

خواص

خواص عمومی

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

رویداد های عمومی

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

تنظیمات پیش فرض CSS

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

canvas {
  height: 150px;
  width: 300px;
}

مثال های بیشتر

مثال زیر را در عنصر canvas در HTML به صورت آنلاین تست و بررسی کنید.