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

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

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

<body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

    <>

      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   مستطیلی را در صفحه ایجاد میکنیم. به مثال زیر توجه کنید :

<canvas id=”myCanvas” width=”200″ height=”100″></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);

 

      context.lineWidth = 5;

      context.strokeStyle = 'blue';

      context.stroke();

 

    </>

 

 

 

ایجاد گرافیک با استفاده ازتگ canvas در طراحی وب سایت ها
چهارشنبه 5 آذر 1393 - 14:18:06 2699 آخرین بازدید : شنبه 24 آذر 1397 - 12:13:54 0
*
*