Canvas: ما هو، طرق الرسم وكيف يعمل

ما هو Canvas؟

Canvas هو منطقة مستطيلة على الشاشة حيث يقوم البرنامج بالرسم بكسلة بكسلة باستخدام سياق الرسم. نشأ المفهوم في معايير الويب HTML5 كجزء من مواصفات WHATWG في عام 2004 وأصبح منذ ذلك الحين أساسًا للرسومات على جميع المنصات.

الفرق الرئيسي بين Canvas والأساليب التصريحية (SVG، مكونات واجهة المستخدم) هو أن Canvas لا يخزن المشهد. بعد الرسم، تُثبت البكسلات، ولتغيير الصورة يجب على البرنامج مسح وإعادة رسم المنطقة المطلوبة. هذا يوفر أقصى أداء في الرسوم المتحركة وأقل استهلاك للذاكرة لتخزين المشهد.

Canvas يدعم نوعين من السياق: 2D للرسومات المسطحة و WebGL / WebGL2 للرسم ثلاثي الأبعاد عبر تسريع أجهزة GPU. وفقًا لـ Statista (2025)، يُستخدم Canvas API في 89% من ألعاب المتصفح و 67% من محررات الويب.

لتطوير التطبيقات المحمولة، تم تكييف Canvas في كل منصة: في Android عبر الفئة Canvas، في iOS عبر Core Graphics و Metal، في .NET MAUI عبر Microsoft.Maui.Graphics. المبدأ الموحد — سياق الرسم، نظام الإحداثيات ومكدس التحويلات — يبقى دون تغيير بغض النظر عن المنصة.

عناصر Canvas

اللوحة هي مصفوفة نقطية ذات حجم ثابت محدد بالبكسلات. يخزن كل بكسل قيمة RGBA — القنوات الأحمر والأخضر والأزرق وشفافية ألفا. يبدأ نظام إحداثيات Canvas من الزاوية العلوية اليسرى، حيث يتجه المحور X إلى اليمين والمحور Y إلى الأسفل.

يتم تحديد حجم اللوحة بواسطة معلمتين: العرض و الارتفاع بالبكسلات. من المهم التمييز بين سمات width و height للوحة وأبعاد CSS — يمكن لـ CSS تغيير حجم المنطقة المرئية، لكن الدقة الداخلية تظل محددة بالسمات. عدم تطابق هذه المعايير يؤدي إلى تشويش الصورة.

في Android، يتطابق حجم Canvas عادة مع حجم View أو Bitmap الذي تم إنشاؤه عليه. عند استدعاء onDraw()، يتم تمرير Canvas مهيأ بالفعل لحجم العرض — لا يحتاج المطور إلى تعيين الأبعاد يدويًا.

كيف يعمل Canvas؟

Canvas يعمل عبر سياق الرسم — كائن يخزن الحالة الحالية: لون التعبئة، سمك الخط، التحويلات والمسار. يتم تطبيق جميع استدعاءات طرق الرسم على هذه الحالة وتعديل مصفوفة البت للوحة.

عملية الرسم تتبع خط أنابيب: مسح المنطقة → ضبط الحالة → بناء المسار → تحديد أو تعبئة. أثناء الرسوم المتحركة، تتكرر هذه الدورة 60 مرة في الثانية، مما يتطلب تحسينًا لكل خطوة للحفاظ على السلاسة.

Canvas يستخدم وضع الرسم الفوري، حيث يتم تنفيذ كل أمر رسم فورًا. على عكس الوضع المحتفظ به (SVG أو DOM)، لا يخزن Canvas قائمة بالكائنات. هذا يقلل من استهلاك الذاكرة ولكنه يعقد التفاعل — يجب على المطور تنفيذ اختبار التصادم وإعادة الرسم بنفسه.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
ctx.font = '16px sans-serif';
ctx.fillText('Hello Canvas', 10, 80);

في المثال أعلاه، نحصل على السياق 2D، نضبط لون التعبئة، نرسم مستطيلاً، ثم نضبط الخط ونعرض النص. تتم جميع العمليات على لوحة بالحجم المحدد في سمات width و height للعنصر.

مكدس حالات Canvas يسمح بحفظ واستعادة معايير الرسم. الطريقة save() تضع الحالة الحالية في المكدس، restore() تستعيد الحالة السابقة. هذا مناسب للتحويلات المتتالية عندما نحتاج إلى تطبيق إزاحة أو تدوير على مجموعة من العناصر دون التأثير على البقية.

الطرق الرئيسية لـ Canvas API

Canvas API يوفر حوالي 40 طريقة لرسم البدائيات والصور والنصوص وإدارة الأنماط. تتضمن المجموعة الأساسية طرقًا للعمل مع المستطيلات والمسارات والأقواس والنص. دعنا نستعرض المجموعات الرئيسية للطرق.

رسم البدائيات

المستطيلات هي أسرع بدائيات Canvas. الطريقة fillRect(x, y, w, h) ترسم مستطيلاً معبأً، strokeRect() ترسم الحدود فقط، clearRect() تمسح المنطقة. للمضلعات المعقدة يُستخدم كائن Path2D، الذي يمكن إعادة استخدامه بين الإطارات.

العمل مع الصور

drawImage() هي الطريقة الرئيسية لرسم الصور النقطية على Canvas. تقبل الطريقة ثلاث مجموعات من المعايير: النسخ البسيط، التحجيم، والقص مع التحجيم. يمكن تحميل الصورة من HTMLImageElement أو SVGImageElement أو Canvas آخر.

لتطوير التطبيقات المحمولة، من المهم أن drawImage() يعمل مع Bitmap في Android و UIImage في iOS. تستخدم تطبيقات المنصة تسريع الأجهزة عندما تكون الصورة و Canvas في نفس ذاكرة نسيج GPU. إذا كانت الصورة لا تتطابق مع ملف الألوان، فقد يحدث فقدان في الأداء بسبب التحويل.

الرسوم المتحركة على Canvas

requestAnimationFrame() هي الآلية القياسية للرسوم المتحركة على Canvas. على عكس setInterval، تقوم هذه الطريقة بمزامنة الرسم مع معدل تحديث الشاشة (عادة 60 إطارًا في الثانية). عندما تكون علامة التبويب في الخلفية، يوقف المتصفح الاستدعاءات، مما يوفر عمر البطارية.

لتحسين الرسوم المتحركة لـ Canvas، قلل من مساحة إعادة الرسم: بدلاً من مسح اللوحة بأكملها، استخدم clearRect() فقط على المنطقة المتغيرة. تجميع العناصر في طبقة واحدة وتخزين الأجزاء الثابتة في Canvas خارج الشاشة يقلل الحمل على خط أنابيب العرض.

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(x, 60, 25, 0, Math.PI * 2);
    ctx.fill();
    x += 2;
    requestAnimationFrame.bind(animate);
}

دورة الرسوم المتحركة تمسح اللوحة، تحدث موضع الكائن، وتعيدة رسمه. requestAnimationFrame تضمن السلاسة والإيقاف التلقائي عند إخفاء علامة التبويب، مما يوفر موارد الجهاز.

Canvas في تطوير التطبيقات المحمولة

Canvas في المنصات المحمولة يتم تنفيذه بشكل مختلف ولكنه يعتمد على الفكرة العامة للوحة البرمجية. في Android، فئة Canvas هي جزء من النظام الرسومي، تُمرر إلى طريقة onDraw(Canvas) لأي View. في iOS، المكافئ هو Core Graphics مع سياق CGContext.

Canvas في Android

Android Canvas يعمل بالاقتران مع Bitmap أو SurfaceView. عند إنشاء Canvas عبر Bitmap، يتم الرسم في الذاكرة، بينما عبر SurfaceView — مباشرة على الشاشة مع تسريع الأجهزة. من API 14+، يستخدم Canvas HWUI — مسرع أجهزة يترجم أوامر الرسم إلى OpenGL أو Vulkan.

الطرق الرئيسية لـ Android Canvas تشمل drawBitmap() و drawCircle() و drawLine() و drawPath(). تقبل جميع الطرق Paint — كائن يتحكم في النمط: اللون، السمك، تأثيرات التنعيم. وفقًا لـ Google I/O (2024)، يظهر Canvas على HWUI زيادة في الأداء تصل إلى 40% مقارنة بالعرض البرمجي.

class CustomView(context: Context) : View(context) {
    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        strokeWidth = 4f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f, 100f, 50f, paint)
        canvas.drawText("Canvas Android", 100f, 200f, paint)
    }
}

في Android، يستخدم Canvas تسريع الأجهزة افتراضيًا على API 14+. للرسومات المعقدة، يُوصى باستخدام SurfaceView أو TextureView، والتي تخصص طبقة منفصلة للرسم في خلفية الموضوع. هذا يمنع حظر مؤشر ترابط واجهة المستخدم أثناء الرسوم المتحركة المكثفة.

Canvas في iOS

Core Graphics هو إطار Apple للرسومات النقطية والمتجهة، المكافئ لـ Canvas. يوفر سياق CGContext طرقًا لرسم الخطوط والمنحنيات والتدرجات والظلال. في SwiftUI، Canvas متاح عبر الهيكل Canvas، المضاف في iOS 15.

SwiftUI Canvas يستخدم GraphicsContext — غلاف آمن النوع فوق Core Graphics. يعمل المطور مع GraphicsContext، الذي يدعم التحويلات والطبقات والرموز. على عكس UIKit، يتعامل SwiftUI Canvas تلقائيًا مع شاشات Retina والأنواع الديناميكية.

struct MyCanvasView: View {
    var body: some View {
        Canvas { context, size in
            context.fill(
                Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100)),
                with: .color(.red)
            )
            context.draw(
                Text("Canvas iOS"),
                at: CGPoint(x: 50, y: 150)
            )
        }
        .frame(width: 300, height: 300)
    }
}

يتميز SwiftUI Canvas بتركيبته التصريحية والتحسين التلقائي للرسم. يحدد الإطار بنفسه أي أجزاء اللوحة تحتاج إلى إعادة الرسم عند تغيير الحالة. GraphicsContext يدعم الطبقات عبر طريقة drawLayer، مما يبسط إنشاء الرسومات متعددة الطبقات.

أداء Canvas

أداء Canvas يعتمد على ثلاثة عوامل: مساحة إعادة الرسم، عدد استدعاءات الرسم، وتعقيد العمليات. كل استدعاء لطريقة رسم هو أمر يمر عبر خط أنابيب: CPU تشكل الأمر، GPU تنفذ التنقيط.

القاعدة الرئيسية للتحسين هي تقليل عدد الاستدعاءات. بدلاً من رسم 1000 نقطة فردية، استخدم مسارًا بـ 1000 قطعة — استدعاء واحد stroke() بدلاً من 1000. القاعدة الثانية هي تخزين العناصر الثابتة مؤقتًا: انقل العناصر غير المتغيرة إلى Canvas خارج الشاشة وانسخها عبر drawImage().

أدوات التحليل: Chrome DevTools Performance للويب، GPU Inspector لنظام Android، و Instruments لنظام iOS. وفقًا لـ Google Chrome Developers (2025)، 70% من مشاكل أداء Canvas ناتجة عن إعادة الرسم المفرط وعدم تخزين الطبقات مؤقتًا.

للأجهزة المحمولة، توفير البطارية أمر بالغ الأهمية. الرسم المفرط يحمل GPU ويقلل وقت التشغيل. استخدم طريقة willBePresented() في Android و displayLink في iOS للمزامنة مع معدل تحديث الشاشة.

إمكانيات Canvas المتقدمة

Canvas الحديث تجاوز حدود الرسم ثنائي الأبعاد البسيط. WebGL المبني على CanvasContext يسمح بعرض الرسومات ثلاثية الأبعاد مع تسريع الأجهزة. OffscreenCanvas ينقل الرسم الثقيل إلى Web Workers دون حظر مؤشر ترابط واجهة المستخدم.

WebGL عبر Canvas

WebGL هو سياق Canvas يوفر الوصول إلى OpenGL ES من المتصفح. بدلاً من fillRect()، يكتب المطور التظليلات بلغة GLSL ويحمل الهندسة إلى المخازن المؤقتة. وفقًا لـ Statista (2025)، 92% من متصفحات المحمول تدعم WebGL 2.0، مما يجعل Canvas أساسًا لألعاب الويب والعروض ثلاثية الأبعاد.

Canvas كحاوية لـ WebGL يبسط تكامل الرسومات ثنائية وثلاثية الأبعاد في تطبيق واحد. على سبيل المثال، يتم عرض المشهد ثلاثي الأبعاد عبر WebGL، بينما يتم عرض تراكب واجهة المستخدم عبر سياق 2D لنفس اللوحة. العرض المختلط يتطلب إدارة الترتيب z ومزامنة معدلات الإطارات.

OffscreenCanvas

OffscreenCanvas هو API لنقل الرسم إلى خلفية الموضوع. على عكس Canvas العادي، OffscreenCanvas غير مرتبط بـ DOM ويمكن استخدامه في Web Worker. هذا يسمح بإجراء حسابات رسومية معقدة بالتوازي مع الخيط الرئيسي دون انخفاض FPS.

نقل إطار مكتمل من Worker إلى الخيط الرئيسي يتم عبر transferControlToOffscreen() و commit(). وفقًا لـ Chrome Platform Status (2025)، OffscreenCanvas مدعوم في 87% من المتصفحات ويُوصى به للتطبيقات ذات الرسم المكثف — محررات الرسوم والمخططات والرسوم المتحركة.