تگ canvas در HTML

  /  فرانت اند   /  HTML   /  تگ 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>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیحات
heightpixelsارتفاع عنصر canvas را مشخص میکند ، به طور پیش فرض 150 هست
widthpixelsعرض تگ canvas را مشخص میکند ، به طور پیش فرض 300 هست

خواص عمومی

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html dir="rtl">
<body>

<h1>عنصر canvas در HTML</h1>

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

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);

//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

</body>
</html>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر