تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت

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

تگ <canvas> در HTML

تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت

برای ترسیم اشکال گوناگون گرافیکی در HTML از تگ <canvas> استفاده میشود، که کاربردها و قابلیتهای جالب و متنوعی دارد.

تگ <canvas> از تگ های جدید در سند HTML و دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.

تگ <canvas> به منظور رسم گرافیک های شناورکه از طریق برنامه نویسی با JavaScript به کار می رود.

به عبارت دیگر تگ <canvas> به تنهایی قادر به ساخت رسم گرافیکی نیست و تنها یک ظرف یا قالبی است که گرافیک ها را در خود جای می دهد و شما باید برای رسم گرافیک ها از اسکریپت ها استفاده کنید.

نحوه ایجاد تگ <canvas> در HTML

تگ <canvas> چندین متد برای رسم مسیر ، جعبه ، دایره ، متن ، و اضافه کردن تصاویر دارد.

تگ <canvas> یک ناحیه مستطیل شکل برای نقاشی کشیدن در صفحه HTML ایجاد می کند.

بصورت پیشفرض، در تگ <canvas> لبه و محتوایی تنظیم نشده است.

همیشه در تگ <canvas> ، خصوصیت های id (برای مراجعه به آن در یک اسکریپت)، width و height را تنظیم نمایید.

می توانید چندین تگ <canvas> را در یک صفحه HTML ایجاد نمایید.

برای اضافه کردن لبه به تگ <canvas>، از خصوصیت style استفاده نمایید:

به مثال زیر توجه کنید:

[html]<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”></canvas>[/html]

رسم کردن داخل تگ <canvas> با JavaScript

تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت

تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت

تمام کارهای گرافیکی در تگ <canvas> توسط JavaScript انجام می شود:

 به مثال کدنویسی شده زیر درون تگ script توجه کنید:
[html]<script>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script>[/html]
در خط اول کد این مثال ابتدا تگ <canvas> را از طریق id در سند html با جاوااسکریپت پیدا کرده ایم:
[html]var c=document.getElementById(“myCanvas”);[/html]

سپس متد ()getContext را از طریق جاوااسکریپت صدا می زنیم (باید آن را با پارامتر رشته ای “۲d” تنظیم نماییم):

[html]var ctx=c.getContext(“2d”);[/html]

شیء ()getContext یکی از اشیاء توکار HTML5 است، که دارای خصوصیات و متدهای برای رسم مسیرها، جعبه، دایره، متن، عکس و … است.

دو خط بعدی، یک مستطیل قرمز رنگ رسم می کند:

[html]ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);[/html]

خصوصیت fillStyle را می توان با یک رنگ، یک طیف ( gradient ) و یا یک الگو مقدار دهی نمود.

مقدار پیشفرض fillStyle ، رنگ سیاه یعنی “۰۰۰۰۰۰#” است.

متد ()fillRect یک مستطیل رسم می کند و آن را با مقداری که برای خصوصیت fillStyle تنظیم کرده ایم، پر می کند.

مختصات در <canvas>

تگ <canvas> یک شبکه دوبعدی است. مختصات گوشه سمت چپ بالا (۰,۰) است.

چهار پارامتر متد (۰,۰,۱۵۰,۷۵)fillRect که در مثال بالا استفاده شد به صورت زیر خواهد بود:

  • پارامتر اول(x): فاصله از چپ نسبت به محور x
  • پارامتر دوم(y): فاصله از بالا نسبت به محور y
  • پارامتر سوم(width): عرض مستطیل، یا فاصله از موقعیت x
  • پارامتر چهارم(height): ارتفاع مستطیل، یا فاصله از موقعیت y

بنابراین با شروع از گوشه سمت چپ-بالا (۰,۰) یک مستطیل ۱۵۰×۷۵ رسم می شود.

بررسی تگ <canvas> در HTML4.0.1 و HTML5

تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت

تگ <canvas> در HTML4.0.1 و نسخه های قدیمی تر پشتیبانی نمی شود.

تگ <canvas> یک تگ جدید در HTML می باشد و تنها در آخرین نسخه آن یعنی HTML5 پشتیبانی می شود.

ویژگی های خصوصی تگ <canvas> در HTML

دارای دو خصوصیت جدید به نام های width و height در HTML5 می باشد، که به ترتیب مشخص کننده عرض و ارتفاع تگ <canvas> می باشد.

ویژگی های عمومی تگ <canvas> در HTML

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

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

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

  • مرورگر chrome  : نسخه ۴.۰
  •  مرورگر FireFox : ورژن ۲.۰
  •  مرورگر internet Explorer : ورژن ۹.۰
  •  مرورگر Opera : نسخه ۹.۰
  •  مرورگر safari : نسخه ۳.۱
تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت

تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت – اختصاصی سایت آموزی