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