نحوه کار با شی canvas

نحوه کار با شی canvas

عنصرHTML5 canvas یک راه حل آسان و قدرتمند به منظور رسم گرافیک با استفاده از جاوا اسکریپ می باشد. می توان از آن برای رسم نمودار، ترکیب عکس و یا انجام انیمیشن های ساده (و نه چندان ساده) استفاده کرد. در اینجا canvas یک عنصر ساده است که تنها دو ویژگی خاص عرض و ارتفاع دارد به علاوه تمام ویژگی های HTML5 مانند شناسه کاربری، نام و کلاس و … را دارند.

تگ < canvas > خود به تنهایی خروجی بر روی صفحه نداشته و باید بوسیله یک اسکریپت شکل مورد نظر را طراحی نمایید . شی  canvas دارای چندین متد و خاصیت برای طراحی خطوط ، اشکال ، کاراکتر ها و اضافه کردن عکس ها به صفحه است .  در این بخش به معرفی و آموزش نحوه کار با خواص و متدهای این شی می پردازیم .

نحوه کار با شی canvas   نحوه کار با شی canvas نحوه کار با شی canvas object canvas

نحوه کار با شی canvas

  ایجاد یک شی canvas :

شی canvas بوسیله یک تگ canvas بر روی صفحه ایجاد شده و به طور پیش فرض تگ < canvas > هیچ خط حاشیه یا محتویاتی ندارد . شکل کلی تعریف یک تگ < canvas > بصورت زیر است :

  • همواره خاصیت id را برای تگ  < canvas > تعیین نمایید تا بتوانید به راحتی در کد های اسکریپت به آن دسترسی داشته باشید .
  • شما می توانید چندین تگ < canvas > را بر روی  یک صفحه تعیین نمایید .
  •   برای اضافه کردن خطوط حاشیه به عنصر از خاصیت Style استفاده نمایید .

خروجی به صورت زیر خواهد بود:

نحوه کار با شی canvas نحوه کار با شی canvas نحوه کار با شی canvas object canvas1

نحوه کار با شی canvas

 کشیدن یک شی canvas به وسیله جاوا اسکرپیت :

در مرحله قبل گفتیم که شی canvas فقط به عنوان یک نگهدارنده شکل هندسی بوده و خروجی بر روی صفحه ندارد . عملیات طراحی و تعیین شکل مورد نظر را باید بوسیله یک اسکریپت ( معمولا به زبان جاوا اسکریپت ) انجام می دهیم . در این بخش با ارایه یک مثال عملی و تشریح مرحله به مرحله کد آن قصد داریم ، شما را با نحوه طراحی شکل آشنا نماییم :

  •  در ابتدا باید تگ canvas مورد نظر را بر روی صفحه پیدا کنیم .  
  • سپس بوسیله متد canvas شی را فراخوانی و متد ” ۲d ” را به آن ارسال کنیم . canvas یک شی پیش ساخته در Html 5 بوده و دارای خواص و متد های بسیاری برای طراحی اشیا می باشد . ارسال مقدار ۲d به معنای دو بعدی بودن عنصر است .
  • در مرحله بعدی اقدام به تعیین رنگ پس زمینه و موقعیت و اندازه شکل می پردازیم

 x : موقعیت قرار گیری عنصر در جهت افقی یا به عبارت دیگر فاصله آن از لبه سمت راستی  عنصر مادر خود را تعیین می کند . ( مختصات x )

y : موقعیت قرار گیری عنصر در جهت عمودی یا به عبارت دیگر فاصله آن از لبه سمت بالایی  عنصر مادر خود را تعیین می کند . ( مختصات y )

width : میزان عرض عنصر را تعیین می کند .

height : میزان ارتفاع عنصر را تعیین می کند

 

خاصیت fillStyle رنگ پس زمینه شکل را تعیین می کند . در این مثال رنگ قرمز برای مثال در نظر گرفته شده است .

همچنین خاصیت fillRect موقعیت قرار گیری شکل در صفحه و اندازه آن را تعیین می کند .

 

  کشیدن خطوط canvas به وسیله جاوا اسکرپیت :

در مرحله قبل نحوه کشیدن یک شکل ۲ بعدی را بوسیله تگ <convas> توضیح دادیم . در این مرحله می خواهیم نحوه کشیدن یک خط ساده در صفحه را نشان دهیم . برای این کار از متد های زیر استفاده می کنیم :

  • ( moveTo ( x , y : این متد مختصات نقطه شروع خط را تعیین می کند .
  • ( lineTo ( x , y : این متد مختصات نقطه پایان خط را تعیین می کند .

پس از تعیین مختصات نقطه شروع و پایان خط بوسیله متد ( ) Storke اقدام به کشیدن خط نمایید .

نتیجه  به صورت زیر خواهد  بود:

index نحوه کار با شی canvas نحوه کار با شی canvas index 1

کشیدن دایره در صفحه وب:

 برای کشیدن یک دایره بر روی صفحه ، از متد زیر استفاده می کنیم “

  • ( arc ( x , y , r, start  ,stop : این متد مختصات نقطه شروع ، اندازه شعاع و نقطه پایان دایره را مشخص می کند .

پس از تعیین مختصات نقطه شروع و پایان خط بوسیله متد ( ) Storke اقدام به کشیدن دایره نمایید .

canvas نحوه کار با شی canvas نحوه کار با شی canvas canvas 

 

نحوه کار با شی canvas نحوه کار با شی canvas نحوه کار با شی canvas canvas 1

نحوه کار با شی canvas

آموزش HTML آموزش طراحی وب

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