۲۴
آبان

جلسه ۲۲ : آموزش کار با تگ canvas در HTML

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTM کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه پیش کار با تگ button را فراگرفتیم؛ تگ button یک دکمه قابل کلیک را تعریف می نماید.
در این جلسه آموزش کار با تگ canvas در HTML را به علاقمندان این دوره ارائه می کنیم.

آموزش کار با تگ canvas در HTML

به مثال زیر توجه نمایید.
کدهای زیر یک مربع قرمز را ترسیم می نماید.

مثال :

<canvas id="myCanvas"></canvas>

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

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 80, 80);

</script>

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

با کمک تگ canvas می توان اشکال گرافیکی را درون یک محدوده نگه داشت؛ این محدوده معمولاً توسط اسکریپت ها (معمولاً JavaScript) ایجاد می شوند.
لذا تگ <canvas> فقط یک ظرف برای نگهداری اشکال گرافیکی است و برای نگهداری آن باید حتماً از یک اسکریپت استفاده کنید.

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

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

عنصر
<canvas>	۴٫۰	۲٫۰	۹٫۰	۳٫۱	۹٫۰

تفاوت بین HTML 4.01 و HTML5

تگ <canvas> در HTML5 تگ جدیدی محسوب می شود.

نکات و توصیه ها

نکته

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

خصیصه ها

خصیصه	مقدار	توضیحات
height	pixels	این خصیصه اندازه ارتفاع Canvas را مشخص می نماید.
width	pixels	این خصیصه اندازه عرض Canvas را مشخص می نماید.

خصیصه های سراسری Global Attributes

تگ <canvas> از خصیصه های سراسری در HTML پشتیبانی می کند.

خصیصه رویداد Event Attributes

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

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

بیشتر مرورگرها عنصر <canvas> را با مقادیر پیش فرض زیر نمایش می دهند:

مثال :

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

canvas {

height: 150px;

width: 300px;

}

کلام آخر

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

QR: جلسه ۲۲ : آموزش کار با تگ canvas در HTML

به اشتراک بگذارید

آشنایی با html tags ,آشنایی با تگ های HTML ,آموزش html ,آموزش HTML tags ,آموزش تگ canvas ,آموزش تگ های html ,آموزش کار با تگ canvas در HTML ,آموزش کامل html ,آموزش کامل HTML tags ,استفاده از تگ canvas ,استفاده از تگ canvas در HTML ,تگ canvas ,تگ canvas چیست ,تگ های HTML ,دوره آموزش HTML ,دوره کامل آموزش html ,کار با تگ canvas ,کار با تگ canvas در HTML

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)