ایجاد گرافیک با استفاده ازتگ canvas در طراحی وب سایت ها-قسمت 2

ایجاد خط در Canvas برای ایجاد خط باید با استفاده از تابع beginPath به مرورگر سایت بگویید که قصد دارید یک خط را ایجاد کنید. با استفاده از تابع moveTo ابتدای خط خود را مشخص میکنید. سپس توسط تابع lineTo انتهای خط را مشخص میکنید. برای مشخص کردن عرض خط می توانید از تابع lineWidth استفاده کنید و با استفاده از تابع strokeStyle رنگ خط را مشخص کنید. برای نمایش خط خود در عاملcanvas نیز باید از تابع stroke استفاده کنید .

ایجاد خط در Canvas

برای ایجاد خط باید با استفاده از تابع beginPath به مرورگر سایت بگویید که قصد دارید یک خط را ایجاد کنید. با استفاده از تابع moveTo ابتدای خط خود را مشخص میکنید. سپس توسط تابع lineTo انتهای خط را مشخص میکنید. برای مشخص کردن عرض خط می توانید از تابع lineWidth استفاده کنید و با استفاده از تابع strokeStyle رنگ خط را مشخص کنید. برای نمایش خط خود در عاملcanvas نیز باید از تابع stroke استفاده کنید .

ctx.beginPath();

ctx.moveTo(200,10);

ctx.lineTo(200,200);

ctx.lineWidth=2;

ctx.strokeStyle="#d921bf";

ctx.stroke();

برای ادامه باز هم می تونید با استفاده از تابع lineTo خط بکشید که ابتدای آن انتهای آخرین خط کشیده شده است

ctx.beginPath();

ctx.moveTo(200,10);

ctx.lineTo(200,200);

ctx.lineTo(10,10);

ctx.lineWidth=2;

ctx.strokeStyle="#d921bf";

ctx.stroke();

دو خط را رسم کردیم. میتوانید هر بار که بخواهید از تابع lineTo استفاده کنید و برای وصل کردن انتهای آخرین خط رسم شده به ابتدای اولین خط رسم شده از تابع closePath استفاده کنید.

ctx.beginPath();

ctx.moveTo(200,10);

ctx.lineTo(200,200);

ctx.lineTo(10,10);

ctx.lineTo(10,200);

ctx.closePath();

ctx.lineWidth=2;

ctx.strokeStyle="#d921bf";

ctx.stroke();

ایجاد دایره و کمان در طراحی سایت ها با استفاده از canvas

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

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x , y مرکز دایره را مشخص میکند که در کجای تگ canvas باشد. radius میزان شعاع را مشخص میکند. پارامترهای startAngle , endAngle شروع و پایان کمان را مشخص میکند که بر اساس رادیان است. و در آخر anticlickwise مشخص میکند آیا شکل درجهت عقربه های ساعت درست شود یا خیر .

در اسکریپت زیر ابتدا ما به مرورگر وب سایت میگوییم که قصد ایجاد یک دایره را داریم سپس توسط تابع arc مکان و درجه های دایره را مشخص میکنیم. چون درجه کمان اول صفر و درجه کمان دوم 360 درجه است یک دایره ایجاد میشود. در خط سوم با رنگ دایره را مشخص کردیم. و در انتها آن را در صفحه رسم میکنیم.

ctx.beginPath();

ctx.arc(300,150,50,0,Math.PI*2,false);

ctx.fillStyle="#2fde3c";

ctx.fill();

میتوان مانند مستطیل هم یک دایره تو خالی رسم کرد مانند زیر:

ctx.beginPath();

ctx.arc(300,150,60,0,Math.PI*2,false);

ctx.lineWidth=2;

ctx.strokeStyle="#2f74de";

ctx.stroke();

نکته : مقداری که به جای پارامتر endAngle گذاشتیم یک مقدار خلاصه شده است. برای تبدیل درجه به رادیان از فرمول زیر استفاده کنید

var degress=45;

var radians=(Math.PI / 180) * degress;

ایجاد گرادینت خطی در طراحی وب سایت ها با تگ canvas

برای ایجاد گرادینت از تابع createLinearGradient(x1,y1,x2,y2) استفاده می کنیم. این تابع یک canvasGradient را بر میگرداند که x1 , y1 ناحیه رنگ اول و x2 , y2 ناحیه رنگ دوم را مشخص میکند. که این صفحه دو پارامتر را دریافت میکند که همان color-stop ها هستند. مقادیر هر مقدار که لازم باشد از color-stop ها استفاده کرد و مقادیر آنها باید بین یک و صفر باشد. برای مثال:

var myGradient=ctx.createLinearGradient(0,0,0,200);

myGradient.addColorStop(0, "#BABABA");

myGradient.addColorStop(1, "#636363");

ctx.fillStyle=myGradient;

ctx.fillRect(0,0,400,300);

سایه ها

چهار پروپرتی(Property) هستند که به شما در ایجاد سایه ها کمک میکنند. در زیر یک نمونه مستطیل با استفاده از سایه ها را میبینی

ctx.shadowOffsetX=5;

ctx.shadowOffsetY=5;

ctx.shadowBlur=10;

ctx.shadowColor="rgba(0,0,0,0.5)";

ctx.fillStyle="#cc0000";

ctx.fillRect(150,180,200,100);

ما با استفاده از چهار پروپرتی بالا سایه را تولید کردیم اما از این به بعد هر شکلی را رسم کنیم دارای سایه خواهد بود. برای اینکه بتوانیم این سایه را فقط به همین شکل اختصاص دهیم در این صورت باید با استفاده از تابع save ابتدا کل شئ های Canvas را ذخیره کنیم کنیم. سپس مقادیر سایه ها و شکلی که میخواهیم دارای سایه شود را بنویسیم سپس تابع restore را فراخونی کنیم که دوباره شئ های درون Canvas برگردد.

ctx.save();

ctx.shadowOffsetX=5;

ctx.shadowOffsetY=5;

ctx.shadowBlur=10;

ctx.shadowColor="rgba(0,0,0,0.5)";

ctx.fillStyle="#cc0000";

ctx.fillRect(150,180,200,100);

ctx.restore();

آیجاد متن در تگ canvas

برای ایجاد متن ابتدا فونت و نوع قلم را مشخص میکنیم سپس جهت و رنگ فونت را و در انتها متن و محل قرارگیری را مینویسیم.

ctx.font="Bold 17px Arial";

ctx.textAlign="left";