آموزش 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 فقط به عنوان یک نگهدارنده شکل هندسی بوده و خروجی
بر روی صفحه ندارد . عملیات طراحی و تعیین شکل مورد نظر را باید بوسیله یک اسکریپت
( معمولا به زبان جاوا اسکریپت ) انجام می دهیم . در این بخش با ارایه یک مثال عملی
و تشریح مرحله به مرحله کد آن قصد داریم ، شما را با نحوه طراحی شکل آشنا نماییم :
- در ابتدا باید تگ 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>
|
|
خروجی
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :