آموزش HTML 5 > طراحی اشیای گرافیکی در HTML 5  >  نحوه کار با شی canvas

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

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

گام اول : ایجاد یک شی canvas :

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

syntax <canvas  id = " id " width="200" height="100"> </canvas>

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

مثال < canvas id="myCanvas" width="200" height="100" style="border: 1px solid blue" >
</canvas>
خروجی

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

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

  1. در ابتدا باید تگ canvas مورد نظر را بر روی صفحه پیدا کنیم .
    کد var c = document.getElementById ( " MyCanvas " ) ;
  2. سپس بوسیله متد canvas شی را فراخوانی و متد " 2d " را به آن ارسال کنیم . canvas یک شی پیش ساخته در Html 5 بوده و دارای خواص و متد های بسیاری برای طراحی اشیا می باشد . ارسال مقدار 2d به معنای دو بعدی بودن عنصر است .
    کد var ctx = c.getContext ( " 2d " ) ;
  3. در مرحله بعدی اقدام به تعیین رنگ پس زمینه و موقعیت و اندازه شکل می پردازیم :
    کد ctx.fillStyle = " #FF0000 " ;
    ctx.fillRect( 0 , 0 , 150 , 75 ) ;

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

    کد fillRect( x , y , width , height ) ;
    • x : موقعیت قرار گیری عنصر در جهت افقی یا به عبارت دیگر فاصله آن از لبه سمت راستی  عنصر مادر خود را تعیین می کند . ( مختصات x )
    • y : موقعیت قرار گیری عنصر در جهت عمودی یا به عبارت دیگر فاصله آن از لبه سمت بالایی  عنصر مادر خود را تعیین می کند . ( مختصات y )
    • width : میزان عرض عنصر را تعیین می کند .
    • height : میزان ارتفاع عنصر را تعیین می کند .

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

مثال <canvas id="MyCanvas" width="200" height="100" style="border: 1px solid #c3c3c3;">
      مرورگر شما از این تگ پشتیبانی نمی کند
</canvas>


<script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(0, 0, 150, 75);
</script>
خروجی مرورگر شما از این تگ پشتیبانی نمی کند

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

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

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

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

مثال کشیدن یک خط ساده : در نهایت کد ما و خروجی آن به صورت زیر خواهد بود  :

ابتدا ، شی Canvas1 را بر روی صفحه فرا خوانده و در متغیر c1 ذخیره می کنیم .
سپس طرح دو بعدی شی c1 را ایجاد کرده و در متغیر ctx1 می ریزیم .
در نهایت با تعیین مختصات ونقطه شروع و پایان خط ، آن را در خروجی طراحی می کنیم .
 

 

مثال <canvas id="Canvas1" width="200" height="100" style="border: 1px solid #c3c3c3;">
      مرورگر شما از این تگ پشتیبانی نمی کند
</canvas>


<script>
      var c1 = document.getElementById("Canvas1");
      var ctx1 = c1.getContext("2d");
      ctx1.moveTo(0, 0);
      ctx1.lineTo(200, 100);
      ctx1.stroke();
</script>
خروجی مرورگر از این تگ پشتیبانی نمی کند

گام چهارم – کشیدن یک دایره در صفحه وب :

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

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

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

مثال کشیدن یک دایره : در نهایت کد ما و خروجی آن به صورت زیر خواهد بود  :

ابتدا ، شی Canvas2 را بر روی صفحه فرا خوانده و در متغیر c2 ذخیره می کنیم .
سپس طرح دو بعدی شی c2 را ایجاد کرده و در متغیر ctx2 می ریزیم .
در نهایت با تعیین مختصات و اندازه ای شی دایره ، آن را در خروجی طراحی می کنیم .
 

مثال <canvas id="Canvas2" width="200" height="100" style="border: 1px solid #c3c3c3;">
      مرورگر شما از این تگ پشتیبانی نمی کند
</canvas>


<script>
      var c2 = document.getElementById("Canvas2");
      var ctx2 = c2.getContext("2d");
      ctx2.beginPath( );
      ctx2.arc( 95 , 50 , 40 , 0,2*Math.PI);
      ctx2.stroke( );
</script>
خروجی مرورگر از این تگ پشتیبانی نمی کند


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید  :

آیا مطالب این صفحه برای شما مناسب و مفید بود ه است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟