146- دروس جافا سكربت – JS Canvas

canvas في JavaScript هو عنصر HTML5 يسمح لك برسم الرسومات بشكل ديناميكي على صفحة الويب. يوفر canvas واجهة برمجة تطبيقات قوية لرسومات ثنائية الأبعاد، مما يجعله أداة مثالية لإنشاء الرسومات والألعاب والرسوم المتحركة.

## مقدمة إلى عنصر Canvas

لبدء استخدام canvas، يجب عليك أولاً إدراج العنصر في HTML. إليك مثال بسيط:

“`html

“`

### إعداد Canvas باستخدام JavaScript

بعد إدراج العنصر في HTML، سنحتاج إلى إعداد سياق الرسم. السياق هو ما يسمح لنا برسم الأشكال على canvas.

// script.js

// الحصول على عنصر الـ Canvas
const canvas = document.getElementById('myCanvas');

// الحصول على سياق الرسم ثنائي الأبعاد
const ctx = canvas.getContext('2d');

### [شركة برمجة مصرية] رسم الأشكال الأساسية

#### رسم مستطيل

يمكن استخدام canvas لرسم مستطيلات بشكل سهل باستخدام دوال [شركة برمجة مصرية] مثل `fillRect` و `strokeRect`.

// رسم مستطيل مملوء
ctx.fillStyle = '#FF0000'; // اللون الأحمر
ctx.fillRect(50, 50, 150, 100); // x, y, العرض, الارتفاع

// رسم مستطيل فارغ (غير مملوء)
ctx.strokeStyle = '#0000FF'; // اللون الأزرق
ctx.strokeRect(250, 50, 150, 100);

#### رسم دائرة

لرسم دائرة أو قوس، نستخدم دالة `arc`.

// رسم دائرة
ctx.beginPath();
ctx.arc(200, 250, 50, 0, 2 * Math.PI); // x, y, نصف القطر, البداية, النهاية
ctx.fillStyle = '#00FF00'; // اللون الأخضر
ctx.fill();
ctx.stroke();

### الرسم بالنقاط

يمكنك رسم نقاط فردية باستخدام `fillRect` بحجم 1×1 بكسل.

// رسم نقطة
ctx.fillStyle = '#000000'; // اللون الأسود
ctx.fillRect(300, 300, 1, 1);

### إضافة نصوص

لإضافة نصوص إلى canvas، نستخدم دوال مثل `fillText` و `strokeText`.

// إضافة نص مملوء
ctx.font = '20px Arial';
ctx.fillStyle = '#000000';
ctx.fillText('مرحبًا بكم في Canvas!', 50, 350);

// إضافة نص مرسوم
ctx.strokeStyle = '#FF00FF';
ctx.strokeText('Canvas ممتع!', 50, 380);

### أمثلة متقدمة

#### رسم خطوط متعددة

يمكنك رسم خطوط متعددة باستخدام `moveTo` و `lineTo`.

ctx.beginPath();
ctx.moveTo(50, 400);
ctx.lineTo(150, 350);
ctx.lineTo(200, 400);
ctx.closePath();
ctx.strokeStyle = '#FFA500'; // اللون البرتقالي
ctx.stroke();

#### إنشاء رسوم متحركة بسيطة

لإنشاء رسوم متحركة، يمكنك استخدام `requestAnimationFrame` لتحديث canvas.

let x = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // تنظيف الـ Canvas
    ctx.fillStyle = '#0000FF';
    ctx.fillRect(x, 200, 50, 50);
    x += 1;
    if (x < canvas.width) {
        requestAnimationFrame(animate);
    }
}
animate();

في هذا المثال، يتحرك مربع أزرق عبر الشاشة.

### الخاتمة

يعد canvas أداة قوية في JavaScript لإنشاء رسومات ديناميكية وتفاعلية. من خلال الجمع بين الأشكال والنصوص والرسوم المتحركة، يمكنك بناء تجارب مستخدم غنية على الويب. من خلال الممارسة والتجريب، يمكنك استغلال إمكانات canvas الكاملة في مشاريعك المستقبلية.