الثلاثاء، 29 نوفمبر 2016

(2) نظرة على تقنية الـ Canvas إحدى طرق الرسوميات في لغة HTML5

استكمالاً لما بدأناه في المقالة السابقة (1) نظرة على تقنية الـ Canvas إحدى طرق الرسوميات في لغة HTML5 سنكمل سوياً رحلتنا عبرعنصر الـ Canvas.

كيف أحدد نصاً ؟ How to Stroke a Text

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.strokeText("Hello World",10,50);

الجديد هنا هو الخاصية font والتي من خلالها نقوم بتمرير حجم ونوع الخط الذي نريد أن نقوم برسمه على صفحة الويب الخاصة بك. أما بخصوص التابع strokeText فيقوم برسم النص الذي يأخذه كأحد الباريميترات التي نقوم بتمريرها من خلاله.

الفرق بين التابع Stroke والتابع Fill يقوم التابع Stroke برسم الأشكال التي تريدها من خلال تحديد إطار لها أما التابع Fill فإنه

يقوم بملئ هذه الأشكال..

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.fillStyle = "red";

ctx.fill();

كيف أرسم لوناً متدرجاً ؟ How to draw Linear Gradient

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

حتى تستطيع القيام بتلوين العناصر لديك بأسلوب الـ Gradient عليك أن تقوم بعدة خطوات أولاً عليك القيام بتعريف متغير خاص الـ Gradient باستخدام التابع createLinearGradient الموجود ضمن المتغير الذي سنستخدمه للرسم من خلاله داخل العنصر canvas وهو ctx context.createLinearGradient(x0,y0,x1,y1); ثانياً ستقوم بإضافة الألوان التي سيتكون منها الـ Gradient الخاص بك باستخدام التابع addColorStop الموجود في المتغير grd الذي عرفناه للتو, المتغيرات التي نستخدمها لهذا التابع: الأول قيمة رقمية (حقيقة) من الصفر 0 وحتى الواحد الصحيح أما الباراميتر الثاني فهو اللون الذي تريد استخدامه بإمكانك كتابة اسم اللون مباشرة أو استخدام إحدى صيغ الألوان كالـ Hexadecimal, RGB, RGBA, HLS, HLSA, لمزيد من المعلومات حول صيغ الألوان زيارة هذا الرابط , هذا وسوف نقوم قريباً بالتحدث عن صيغ الألوان المستخدمة في تطوير وتصميم صفحات الويب, الخطوة قبل الأخيرة أن نقوم بتعيين الخاصية fillStyle بقيمة المتغير grd الذي عملنا عليه في الأسطر السابقة, أما الخطوة الأخيرة فهي باستخدام التابع fillRect الذي يستخدم الباريميترات التالية: context.fillRect(x,y,width,height); canvas-fillrect-function

كيف أرسم لوناً متدرجاً بشكل دائري؟ How to draw Circular Gradient

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

المختلف هناعن الكود السابق هو التابع createRadialGradient والذي يحتوي على الباريميترات التالية: context.createRadialGradient(x0,y0,r0,x1,y1,r1); canvas-createradialgradient-function

الاثنين، 28 نوفمبر 2016

(1) نظرة على تقنية الـ canvas إحدى طرق الرسوميات في لغة HTML5

Canvas

ماهو: عنصر جديد في HTML 5 يستخدم من أجل الرسم على صفحة الويب Web Page باستخدام لغة JavaScript.

لماذا استخدمه: في الصورة التالية ستجد أربعة أشياء تستطيع فعلها باستخدم الوسم Canvas وهناك أيضاً المزيد.

مالذي أستطيع أن أقوم به باستخدام هذه التقنية: إليك بعض الإمكانيات التي يوفرها الـ Canvas :

باستخدامك للـ Canvas ستستطيع أن تقوم برسم المسارات paths, المربعات والمستطيلات boxes, الدوائر circles, النصوص text, بالإضافة إلى الصور images.

عندما تقوم باستخدام الـ Canvas فإنه يقوم برسم مساحة مستطيلة بدون حدود لذلك لن تستطيع أن ترى شيئاً حتى تقوم بكتابة بعض أكواد الـ JavaScript أو على الأقل وضع إطار باستخدم لغة الـ CSS كما في المثال التالي:


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

كيف أرسم خطاً ؟ How to draw a line







<!DOCTYPE html>
<html>
<body>
 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(200,100);
  ctx.stroke();
 </script>
</body>
</html>

مالذي حدث؟

قمنا بتعريف عنصر من نوع Canvas وعرفنا له الخاصية id بالقيمة myCanvas, هذا الجزء الأول أما الجزء الثاني فهو كود للغة الـ Javascript, فيما يلي شرح مفصل لهذا الكود:

var c = document.getElementById("myCanvas"); قمنا هنا بتغير متغير Variable باسم c ثم اسناد قمية العنصر myCanvas إليه باستخدام التابع getElementById الموجود في المكتبة document.

var ctx = c.getContext("2d"); قمنا هنا بتغير متغير Variable باسم ctx وهو المتغير الذي سنستخدمه للرسم من خلاله داخل العنصر canvas, ثم قمنا باسناد قمية له باستخدام المتغير c اللذي قمنا بتعريفه في السطر السابق من خلال التابع getContext.

ctx.moveTo(0,0);هنا سوف نبدأ بعملية الرسم حيث قمنا بإعطاء أمر للمتغير ctx بالبدء بتحديد نقطة البداية وهي القيمة صفر أفقياً وصفر عامدياً وهي النقطة العلوية اليسارية لعنصر الرسم canvas.

ctx.lineTo(200,100); في هذا الأمر نقول للكود أن يتحرك باتجاه النقطة 200 أفقياً و 100 عامودياً.

ctx.stroke(); هذا آخر أمر في الكود وهنا نخبر البرنامج أن يبدأ بالرسم.

كيف أرسم دائرة ؟ How to draw a Circle

فلننظر إلى الكود التالي:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
هناك فقط سطران جديدان, هما
ctx.beginPath(); والذي نخبر فيه البرنامج بأننا سوف نقوم برسم مسار وهو أمر ضروري للبدء برسم الدائرة
ctx.arc(95,50,40,0,2*Math.PI); في هذا الأمر نقوم باخبار البرنامج برسم دائرة وفق بعض الباراميترات Parameters وهي كالتالي:
التابع arc: يستخدم لرسم قوس أو منحنى أو دائرة أو جزء من الدائرة, ويكتب بالصيغة التالية:
context.arc(x, y, r, sAngle, eAngle, counterclockwise);

إليك قاعدة تساعدك على رسم الدوائر دائما ,,,,, قم بوضع قيمة زاوية البداية Start Angle بالرقم صفر, وقيمة زاوية النهاية End Angle بالقيمة 2*Math.PI

ماهي الخاصية Math.PI من إحدى المكتبات الموجودة في لغة الـ JavaScript هي Math و تحتوي على مجموعة من التوابع والخصائص الحسابية الجاهزة, أما PI فهي قيمة رقم ثابت الرياضيات وهو يساوي تقريباً (3.14159) أو 22/7, ويسمى باي أو طـ ويرمز له بالشكل التالي المأخوذ من المحارف الإغريقية : π للمزيد من المعلومات اضغط لزيارة الرابط

تبدأ نقطة البداية في رسم الدائرة أو الأقواس من اليمين إلى اليسار باتجاه عقارب الساعة, كما يوضح الرسم التالي:

النقطة الحمراء تحمل القيمة صفر هي نقطة البداية sAngle و النقطة الزرقاء هي نقطة النهاية eAngle, لذلك عليك دائماً الإنتباه أين تبدأ وأين تنتهي في رسم الأقواس والدوائر.

الاثنين، 5 سبتمبر 2016

كيف تحصل على لقب مبرمج؟

أتظن أنك إن تخرجت من إحدى الكليات أو المعاهد المتعلقة بعلوم الحاسب تصبح مبرمجاً ؟ أتظن أنك إن عملت في إحدى شركات البرمجة الكبرى أو الصغرى أو أياً كان مستواها تصبح مبرمجاً؟ في وطننا العربي يحتاج منك الأمر لأكثر من ذلك فمن البيت الذي تربيت فيه إلى زوجتك التي سترتبط بها مروراً بأبو عبدو الموظف في السجل المدني وعم ... البواب ستحتاج إلى أن تجلس مع كل منهم على انفراد وتطلعه على ما تعمل لأنهم سينظون أنك تقوم (بتسطيب) الويندوز :/ فلقد أصبح لدي يقين أنك إن أخبرتهم أنك تعمل في مجال الكمبيوتر بدون تحديد مسمى وظيفي سيتفهمون الأمر أكثر, فعادة لا يستطيع أغلب الناس معرفة ما يقوم به المبرمج في حياته وما هي طبيعة عمله وأحياناً (كثيرة) لا يتفهمون السبب وراء أجورهم المرتفعة من هذا العمل ويعتقدون أن في الأمر خدعة ما, ففي بداية حياتي العملية حيث كان يعتقد والدي أنني أقوم بأعمال غير شرعية باستخدام الحاسب وذلك لأن بعض الأشخاص في تلك الفترة كانوا يقومون بتحميل الأفلام الإبحاية وبيعها على أسطوانات مدمجة, وبعد جهد جهيد استطعت أن أثبت برائتي لوالدي عبر مناقشته وإطلاعه على طبيعة عملي وبرغم أنه لم يكن قادراً على فهم الجدوى من وراء تلك الأسطر التي أقوم بكتابتها إلا أنه كان يحاول أنه يبدوا متفهاً , ولكن شكوكا أخرى ً ظهرت حول أنني أقضي وقتي على جهاز الكمبيوتر في اللعب وأنني إذا قمت بمساعدته في عمله خير لي من تلك الساعات التي أقضيها وراء الكمبيوتر, ولم يقتصر الأمر عند هذا الحد بل أصبحت أتهم بأنني أهمل عائلتي وأنني (تغيرت) وأن هذا الكمبيوتر لعنة وأن البرمجة ما هي إلا سخافة و(ضحك على اللحى).

استمرت هذه المعاناة لفترة حتى تسنى لي أن أحصل على فرصة تطوير لموقع انترنت وذلك عام 2003 لصالح شركة كبيرة في مصر استغرق مني بناء الموقع قرابة الاسبوعين بين التصميم والتكويد حتى إذا انتهيت منه وقمت برفعه استدعيت والدي لأريه ما قمت بفعله وكيف أن ابنه (عبقرينو) وأن الجهد المبذول في تعليمه لم يضع هبائاً, ولكم أن تتصوروا كيف كان شعوري وكيف كان احساسي بالنشوة وأنا أقوم باستعراض الصفحات (الستاتيكية) وقوائم (الفلاش) وتلك الأزرار التي استغرقت مني جهداً ضخماً في التص

ميم والبرمجة حيث كانت أغلب البرمجيات والتقنيات المتعلقة ببرمجة الإنترنت في تل الفترة متواضعة نوعاً ما, عندها ولأول مرة طلب أبي مني أن يجلس بنفسه ويتصفح الموقع الذي قمت بإنتاجه ساد الصمت لمدة عشر دقائق وهو يتصفح الموقع ثم التفت إلي بهدوء وقال (جيد) وذهب.

بهذه البساطة وبهذا الهدوء الذي أفقدني نشوة الإنتصار وجعلني في حيرة من أمري ولم أدرك حينها أن والدي قد أدرك أن هناك شيئاً جديداً قد أضافته البشرية إلى سجلها العلمي وهو البرمجة, كما أنني لم أدرك أنه بذلك قد منحني تلك الصفة التي أحملها إلى الآن وهي مبرمج.

Z Software Team With Saleem

الثلاثاء، 29 نوفمبر 2016

(2) نظرة على تقنية الـ Canvas إحدى طرق الرسوميات في لغة HTML5

الاثنين، 28 نوفمبر 2016

(1) نظرة على تقنية الـ canvas إحدى طرق الرسوميات في لغة HTML5

Canvas

مالذي حدث؟

كيف أرسم دائرة ؟ How to draw a Circle

الاثنين، 5 سبتمبر 2016

كيف تحصل على لقب مبرمج؟

أرشيف المدونة الإلكترونية