🎨 مقدمة إلى Canvas في HTML: عالم الرسم الديناميكي

مرحباً بك في درس Canvas! إذا كنت تريد إضافة رسومات تفاعلية ومتحركة إلى موقعك الإلكتروني، فإن عنصر <canvas> هو الحل المثالي. فكر فيه كلوحة رسم بيضاء يمكنك البرمجة عليها لإنشاء كل شيء من الرسوم البسيطة إلى الألعاب المعقدة.

في هذا الدرس، سنتعلم كيفية استخدام هذه الأداة القوية خطوة بخطوة. هيا بنا نبدأ رحلة الإبداع البرمجي! ✨

🖼️ ما هو عنصر Canvas؟

<canvas> هو عنصر HTML جديد تم إضافته في HTML5. مهمته الأساسية هي رسم الرسومات بشكل ديناميكي باستخدام JavaScript. تخيل أنه إطار صورة فارغ - أنت من يقرر ما سيظهر بداخله باستخدام الأوامر البرمجية.

الفرق بين Canvas والصورة العادية (<img>):

  • الصورة العادية: تعرض ملف صورة موجود مسبقاً
  • Canvas: ترسم محتوى ديناميكياً وتفاعلياً أثناء تشغيل الصفحة

📝 إنشاء أول Canvas لك

لنبدأ بأبسط شيء: إضافة عنصر Canvas إلى صفحتك. الأمر بسيط جداً!

<!DOCTYPE html>
<html>
<head>
    <title>تجربتي مع Canvas</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

شرح الكود:

  • id="myCanvas": نعطي للـ Canvas اسم حتى نتمكن من التحكم به عبر JavaScript
  • width="400" height="200": نحدد أبعاد اللوحة (العرض والارتفاع)

💡 ملاحظة مهمة: دائماً حدد الأبعاد باستخدام السمات width و height وليس CSS، لأن CSS قد يشوه الرسم.

🎯 التحضير للرسم: الحصول على السياق (Context)

قبل أن نبدأ الرسم، نحتاج إلى "الحصول على السياق" - Think of it as getting your paintbrush ready!

<script>
// ننتظر حتى يتم تحميل الصفحة بالكامل
window.onload = function() {
    // نجد عنصر Canvas باستخدام الـ ID
    var canvas = document.getElementById('myCanvas');
    
    // نحصل على سياق الرسم (2D في حالتنا)
    var ctx = canvas.getContext('2d');
};
</script>

ما هو السياق (Context)؟

  • هو الكائن الذي يحتوي على جميع أدوات الرسم
  • '2d' يعني أننا نريد الرسم ثنائي الأبعاد (هناك أيضاً WebGL للرسم ثلاثي الأبعاد)

🖌️ الرسم الأول: خطوط ومستطيلات

الآن حان وقت الإبداع! لنرسم بعض الأشكال الأساسية.

رسم مستطيل بسيط:

<script>
window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    
    // نحدد لون التعبئة (Fill)
    ctx.fillStyle = "blue";
    
    // نرسم مستطيل مملوء
    ctx.fillRect(50, 50, 100, 75);
};
</script>

شرح الدالة fillRect(x, y, width, height):

  • x, y: موقع الزاوية العلوية اليسرى للمستطيل
  • width, height: عرض وارتفاع المستطيل

رسم مستطيل حدود فقط:

// نحدد لون الحدود
ctx.strokeStyle = "red";
// نحدد سمك الحدود
ctx.lineWidth = 3;
// نرسم مستطيل حدود فقط
ctx.strokeRect(200, 50, 100, 75);

✏️ رسم الخطوط والمسارات

لرسم أشكال أكثر تعقيداً، نستخدم المسارات (Paths). Think of it as connecting dots!

// نبدأ مسار جديد
ctx.beginPath();
// ننتقل إلى نقطة البداية (بدون رسم)
ctx.moveTo(50, 150);
// نرسم خط إلى نقطة جديدة
ctx.lineTo(150, 150);
ctx.lineTo(100, 100);
// نغلق المسار (نعود للنقطة الأولى)
ctx.closePath();
// نحدد لون الحدود
ctx.strokeStyle = "green";
// نرسم المسار
ctx.stroke();

النتيجة: مثلث أخضر!

🔵 رسم الدوائر والأقواس

الدوائر ترسم باستخدام دالة arc():

ctx.beginPath();
// arc(centerX, centerY, radius, startAngle, endAngle)
ctx.arc(300, 150, 30, 0, 2 * Math.PI);
ctx.fillStyle = "orange";
ctx.fill();

💡 تذكر: الزوايا في JavaScript تقاس بالراديان، وليس بالدرجات!

🔤 إضافة النصوص إلى Canvas

يمكنك أيضاً كتابة النصوص على لوحتك:

// نحدد خط وحجم النص
ctx.font = "20px Arial";
// نحدد لون النص
ctx.fillStyle = "purple";
// نكتب النص في موقع محدد
ctx.fillText("أهلاً بالعالم!", 50, 180);

🎨 تخصيص المظهر: الألوان والتدرجات

لجعل رسوماتك أكثر جاذبية، يمكنك استخدام الألوان والتدرجات:

// لون عادي
ctx.fillStyle = "#FF5733";

// تدرج خطي
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;

💡 نصائح عملية للعمل مع Canvas

  1. ابدأ بسيطاً: تعلم الأساسيات جيداً قبل التوجه للأشكال المعقدة
  2. خطط لتصميمك: ارسم على ورقة أولاً ما تريد تنفيذه
  3. جرب وأخطئ: أفضل طريقة للتعلم هي التجربة
  4. استخدم التعليقات: دوّن ما يفعله كل جزء من الكود