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

تگ canvas برای ایجاد ترسیمات گرافیکی در طراحی سایت ها به کار برده می شود . در واقع این تگ یک بوم نقاشی در اختیار شما قرار می دهد که با استفاده از جاوا اسکریپت می توانید ترسیمات گرافیکی در صفحات وب سایت ها به صورت run time تولید کنید . می توان روی تک تک پیکسل های صفحه دسترسی داشته باشید . در نگاه کلی canvas برای کشیدن چهار ضلعی ها با رنگ های مختلف,چهار ضلعی هایی با تدارج رنگ,چهار ضلعی هایی با رنگ های مختلف و متن هایی با رنگ های مختلف در طراحی وب سایت ها مورد استفاده قرار می گیرد. در این مقاله قصد داریم تگ canvas و خصوصیات ان را با ذکر مثال هایی بررسی کنیم .

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

<body>

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

var context = canvas.getContext('2d');

// do cool things with the context

context.font = '40pt Calibri';

context.fillStyle = 'blue';

context.fillText('Hello World!', 150, 100);

</>

</body>

تگ canvas مانند سایر تگ های html است ، با این تفاوت که محتوای این تگ توسط جاوااسکریپت رندر می شود . در مثال بالا نیز با استفاده از این تگ توانستیم متن hello world را در صفحه ایجاد کنیم.

در مثال بعدی با استفاده از تگ canvas مستطیلی را در صفحه ایجاد میکنیم. به مثال زیر توجه کنید :

< type=”text/java”>
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
</>

در اسکریپت بالا ابتدا Id تگ canvas گرفته می شود و در متغیری ذخیره می شود. Getcontext ابجکتی است که شامل متد ها و مشخصاتی است که از ان برای رندر کردن گرافیک موجود در تگ canvas آستفاده می شود. Context می تواند مقدار 2d و webgl یا 3d را داشته باشد که دوبعدی یا سه بعدی بودن گرافیک مورد نظر را مشخص می کند .د رخط بعدی نیز رنگ مورد نظر را برای مستطیل انتخاب شد. در اخر نیز با استفاده از fillrect مستطیلی را با در نقطه ع0 0 عامل canvas و با طول 150 و عرض 75 ایجاد کردیم .

ایجاد مسیر در تگ canvas

برای ایجاد یک مسیر در تگ canvas ما می توانیم چندین زیر مسیر را بهم متصل کنیم . از lineTo() . archTo() ، quadraticCurveTo () ، bezierCurveTo () برای ساختن هر زیر مسیر که در نهایت مسیر مور نظر مارا می سازند استفاده کنیم . از beginPath() نیز برای ساخت مسیر استفاده می کنیم .

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

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(100, 20);

// line 1

context.lineTo(200, 160);

// quadratic curve

context.quadraticCurveTo(230, 200, 250, 120);

// bezier curve

context.bezierCurveTo(290, -40, 300, 200, 400, 150);

// line 2

context.lineTo(500, 90);