تگ canvas در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ canvas در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

تگ canvas چیست؟

تگ canvas که ترجمه آن به زبان فارسی بوم می شود محیطی را برای رسم اشکال گرافیکی توسط زبان جاوا اسکریپت فراهم می کند.

این تگ نقش بوم در نقاشی را ایجاد می کند و فقط نگهدارنده اشکال گرافیکی است. تمامی کارهای گرافیکی توسط زبان جاوا اسکریپت انجام می شود.

این تگ با <canvas> شروع شده و با </canvas> پایان می یابد.

<canvas></canvas>

صفات تگ canvas

در این بخش با صفات تگ canvas آشنا خواهید شد.

صفت height

اندازه ارتفاع تگ canvas را مشخص می کند.

<canvas height="150"></canvas>

صفت width

اندازه عرض تگ canvas را مشخص می کند.

<canvas width="300"></canvas>

مثال تگ canvas

در مثال زیر با استفاده از تگ canvas و زبان جاوا اسکریپت مربعی را رسم کردیم.

کد:

<canvas id="newcanvas"></canvas>

<script>
var canvas = document.getElementById("newcanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#5F9EA0";
ctx.fillRect(5 ,5 ,100 ,100);
</script>

اجرا

سازگاری با مرورگرها

تگ canvas با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS