طراحی با canvas (بخش اول)

همانطور که در بالا معرفی شد، تگ canvas ویژگی جدیدیست که در نسخه نهایی HTML5 ارائه گردیده و به کمک آن و البته به کمک زبان برنامه نویسی مانند JavaScript می توان اشکال دوبعدی همانند مستطیل، دایره، خطوط، حروف و البته تصاویر را طراحی نمود.
لازم به ذکر این نکته است که تگ canvas در مرورگر اینترنت اکسپلورر نسخه 8 و قبل از آن عمل نمی کند.

بصورت پیش فرض برای هر canvas، عرض فضای اختصاصی300 پیکسل و ارتفاع آن 150 پیکسل می باشد ولی امکان تغییر این اندازه برای شما وجود دارد.
نحوه استفاده از این دو خاصیت در تگ canvas به شرح زیراست:

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

<canvas height="100" width="200" style="border:1px solid #000;"></canvas>

<canvas height="100" width="100" style="border:1px solid #FF0000;" id="myCanvas"></canvas>

به کمک این دستور می توانید یک مستطیل در canvas خود ترسیم نمایید.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>
			

دستور GetContext دوبعدی بودن canvas را تعیین می نماید.

fillStyle: به کمک این دستور می توانید به شکل ترسیم شده خود رنگ، گرادیانت و یا پترن دلخواد خود را تخصیص دهید.

توسط دستور fillRect مستطیل کشیده می شود. این دستور دارای چهار مقدار به ترتیب X مختصات مستطیل بر حسب محور X ها، و Y مختصات بر حسب محور Y ها ، width عرض مستطیل و height ارتفاع آن می باشد.

<canvas height="300" width="150" style="border:1px solid #FF0000;" id="linecanvas"></canvas>
<script>
var c = document.getElementById("linecanvas ");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
			

عبارت moveTo دو مقدار دارد، عدد اول در مختصات X و عدد دوم در مختصات Y محاسبه می شود. این عبارت نقطه شروع حرکت بدون ایجاد خط را بر روی بوم تعیین میکند.

عبارت lineTo این عبارت همانند moveTo است با این تفاوت که مسیر خط را نمایش می دهد و مقادیر وارد شده در واقع نقطه انتهایی مسیر خط بر روی بوم و فرایند کشیدن خط را به نمایش می گذارد.

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

<canvas height="300" width="150" style="border:1px solid #FF0000;" id="linecanvas"></canvas>
<script>
var c = document.getElementById("linecanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.lineTo(20, 20);
ctx.strokeStyle = "blue";
ctx.stroke();

</script>
			

دستور کد جدیدی که در این مثال آورده شده است، عبارت beginPath می باشد. این عبارت برای زمانی استفاده می شود که می خواهیم چندین مسیر خط تعیین کنیم و به کمک آن مشخص می کنیم که ابتدای مسیر از کجا شروع می شود.

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

دستور strokeStyle به منظور تخصیص رنگ، گرادیانت و یا پترن برای خطوط canvas استفاده میشود.

<canvas height="300" width="150" style="border:1px solid #FF0000;" id="cirlceCanvas"></canvas>
<script>
var c = document.getElementById("cirlceCanvas ");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
			

برای ترسیم دایره دستوری بنام arc وجود دارد که دارای 5 متغیر می باشد.

Arc(x,y,r,start,stop,direction);

<canvas height="300" width="150" style="border:1px solid #FF0000;" id="textCanvas"></canvas>
<script>
var c = document.getElementById("textCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("This is my Canvas Text", 10, 50);
</script>
			

در قسمت font می توانید اندازه نوشته و نوع نوشتار آنرا انتخاب نمایید.
دستور fillText دارای سه مقدار می باشد که به شرح زیر است.

fillText("نوشته مورد نظر",X,Y);

strokeText("This is my Canvas Text", 10, 50);

از آنجایی که مطالب مربوط به تگ canvas بسیار زیاد است، در بخش های بعدی به مابقی آنها پرداخته خواهد شد.