معرفی و کاربرد تگ 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> توسط JavaScript انجام می شود:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script>[/html]
سپس متد ()getContext را از طریق جاوااسکریپت صدا می زنیم (باید آن را با پارامتر رشته ای “۲d” تنظیم نماییم):
شیء ()getContext یکی از اشیاء توکار HTML5 است، که دارای خصوصیات و متدهای برای رسم مسیرها، جعبه، دایره، متن، عکس و … است.
دو خط بعدی، یک مستطیل قرمز رنگ رسم می کند:
ctx.fillRect(0,0,150,75);[/html]
خصوصیت fillStyle را می توان با یک رنگ، یک طیف ( gradient ) و یا یک الگو مقدار دهی نمود.
مقدار پیشفرض fillStyle ، رنگ سیاه یعنی “000000#” است.
متد ()fillRect یک مستطیل رسم می کند و آن را با مقداری که برای خصوصیت fillStyle تنظیم کرده ایم، پر می کند.
مختصات در <canvas>
تگ <canvas> یک شبکه دوبعدی است. مختصات گوشه سمت چپ بالا (0,0) است.
چهار پارامتر متد (0,0,150,75)fillRect که در مثال بالا استفاده شد به صورت زیر خواهد بود:
- پارامتر اول(x): فاصله از چپ نسبت به محور x
- پارامتر دوم(y): فاصله از بالا نسبت به محور y
- پارامتر سوم(width): عرض مستطیل، یا فاصله از موقعیت x
- پارامتر چهارم(height): ارتفاع مستطیل، یا فاصله از موقعیت y
بنابراین با شروع از گوشه سمت چپ-بالا (0,0) یک مستطیل 150×75 رسم می شود.
بررسی تگ <canvas> در HTML4.0.1 و HTML5
تگ <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 : نسخه ۳.۱
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
تگ canvas در HTML ترسیم گرافیکی با جاوا اسکریپت – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید