الثلاثاء، 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, لذلك عليك دائماً الإنتباه أين تبدأ وأين تنتهي في رسم الأقواس والدوائر.

Z Software Team With Saleem

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

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

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

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

Canvas

مالذي حدث؟

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

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