نحوه کار با شی 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 فقط به عنوان یک نگهدارنده شکل هندسی بوده و خروجی بر روی صفحه ندارد . عملیات طراحی و تعیین شکل مورد نظر را باید بوسیله یک اسکریپت ( معمولا به زبان جاوا اسکریپت ) انجام می دهیم . در این بخش با ارایه یک مثال عملی و تشریح مرحله به مرحله کد آن قصد داریم ، شما را با نحوه طراحی شکل آشنا نماییم :
- در ابتدا باید تگ canvas مورد نظر را بر روی صفحه پیدا کنیم .
| کد |
var c = document.getElementById ( " MyCanvas " ) ; |
- سپس بوسیله متد canvas شی را فراخوانی و متد " 2d " را به آن ارسال کنیم . canvas یک شی پیش ساخته در Html 5 بوده و دارای خواص و متد های بسیاری برای طراحی اشیا می باشد . ارسال مقدار 2d به معنای دو بعدی بودن عنصر است .
| کد |
var ctx = c.getContext ( " 2d " ) ; |
- در مرحله بعدی اقدام به تعیین رنگ پس زمینه و موقعیت و اندازه شکل می پردازیم :
| کد |
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> |
| خروجی |
|