HTML5 الدرس السادس فى

Graphics In HTML5

Canvas Tag:-

يستخدم تاج (canvas) فى عملية الجرافيك او الرسم وهو عبارة عن اللوحة التى يتم بها الرسم حيث يمكن رسم مستطيل او دائرة او نصوص او غيرة داخل هذة اللوحة والشكل العام لهذا التاج كالتالى:

<canvas> </canvas>

وبهذا التاج يتم انشاء اللوحة التى يتم الرسم بها وهى عبارة عن مستطيل يتم تحديد طولها وعرضها وايضا يمكن عمل استايل لها من حيث اللون والاطار وغيرة وبين هذا التاج يتم كتابة تاجات الرسم والتى تعتمد على لغة الجافا سكريبت.

مثال:

<!DOCTYPE html>

<html>

<body>

<canvas id=”myCanvas” width=”250″ height=”80″ style=”border:2px solid # CCCCFF;”>

</canvas>

<script>

var h=document.getElementById(“myCanvas”);

var ht=h.getContext(“2d”);

ht.fillStyle=”#0066FF”;

ht.fillRect(10,10,170,80);

</script>

</body>

</html>

وكما فى المثال فان تاج <canvas> قمنا باعطائة id وهو (myCanvas) لكى نستطيع جلبة داخل الاسكريبت عن طريق دالة (document.getElementById).ثم بعد ذلك استخدمنا دالة (getContext) والتى لابد من تمرير (2d) اليها كما هو موضح وهذة الدالة يوجد داخلها العديد من الخصائص التى نستطيع بها الرسم ومن هذة الخصائص خاصية (fillStyle) والتى تتحكم بلون الرسم وخاصية (fillRect) والتى تستطيع بها رسم مستطيل ولها اربع بارمترات البارمتر الاول والثانى هما بعد المستطيل من الاعلى ومن جهة الشمال مع اللوحة اما البارمتر الثالث والرابع فهما عرض وطول المستطيل.

مثال:

<!DOCTYPE html>

<html>

<body>

<canvas id=”myCanvas” width=”250″ height=”80″ style=”border:1px solid # CCCCFF;”>

</canvas>

<script>

var h=document.getElementById(“myCanvas”);

var ht=h.getContext(“2d”);

ht.font=”25px Arial”;

ht.fillText(“Wellcome”,12,52);

</script>

</body>

</html>

والمثال السابق تستطيع عن طريقة رسم النصوص حيث دالة (fillText) يتم كتابة النص بها ويكون النص سميك ويمكن استبدالها بدالة (strokeText) ويكون النص عن طريقها مفرغ او غير سميك ودالة (font) لتحديد نوع الخط وحجمة.

مثال:

<!DOCTYPE html>

<html>

<body>

<canvas id=”myCanvas” width=”250″ height=”80″ style=”border:1px solid # CCCCFF;”></canvas>

<script>

var h=document.getElementById(“myCanvas”);

var ht=c.getContext(“2d”);

ctx.moveTo(0,0);

ctx.lineTo(150,100);

ctx.stroke();

</script>

</body>

</html>

هذا المثال لرسم الخطوط حيث تحدد لة نقطة بداية الخط عن طريق الدالة (moveTo) ونقطة نهاية الخط عن طريق الدالة (lineTo) وفى النهاية نستخدم دالة (stroke) لتنفيذ الخط وبالمثل يمكن رسم دائرة كالتالى:

مثال:

<!DOCTYPE html>

<html>

<body>

<canvas id=”myCanvas” width=”250″ height=”80″ style=”border:1px solid # CCCCFF;”></canvas>

<script>

var h=document.getElementById(“myCanvas”);

var ht=h.getContext(“2d”);

ctx.beginPath();

ctx.arc(80,50,35,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

هذا المثال لرسم دائرة حيث الدالة (beginPath) لتحديد مسار الدائرة والدالة (arc) تحدد ابعاد ونقاط الدائرة وتاخذ خمس بارمترات البارمتر الاول والثانى يعبر عن البعد الافقى والراسى والبامتر الثالث يعبر عن نصف قطر الدائرة والبارمتر الرابع والخامس هما يحددان نقطة بداية المسار الدائرى وهو الصفر ونقطة نهاية المسار والتى هى عبارة عن محيط الدائرة

(2*Math.PI).

Advertisements

2 responses

  1. Nosyba Alhaj | Reply

    السلام عليكم لوسمحتو عايزه شر لبرنامج process maker
    وphp

    1. عليكم السلام ورحم ة اللة وبركاتة ,اما بخصوص طلبيك فموجود بالموقع

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: