مستخدم:Midnight screaming/لوحة (لغة توصيف النص الفائق)

عنصر اللوحة هو جزء من لغة توصيف النص الفائق 5 ويَسمح بتصيير الأشكال ثنائية الأبعاد والصور النقطية باستخدام نصوص برمجية وبطريقة ديناميكية. هو نموذج إجرائي منخفض المستوى يُحَدِّث صورة نقطية. اللوحة تساعد أيضاً على تطوير الألعاب ثنائية الأبعاد.

توفر اللوحة واجهة برمجة ثنائية الأبعاد خاصة بها، لكنها تدعم واجهة WebGL لتسمح بتصيير الرسومات ثلاثية الأبعاد باستخدام OpenGL ES.

تاريخ

اللوحة قدمتها آبل لتستخدم في ويب كيت لماك أو إس إكس عام 2004،^[1] شَغَّلت تطبيقات مثل عناصر تحكم اللوحة ومتصفح سافاري. لاحقاً في 2005, اعتمدت في النسخة 1.8 من غيكو,^[2] وأوبيرا في 2006, واعتمدته مجموعة عمل تقنية تطبيقات النص الفائق للويب (بالإنجليزية: Web Hypertext Application Technology Working Group)‏ في معيارٍ جديد للجيل التالي من تقنيات الويب.

الاستخدام

اللوحة تتكون من مساحة قابلة للرسم تحدد في نص إتش تي إم إل بصفات الطول والعرض. يمكن لجافا سكريبت الوصول إلى المساحة من خلال مجموعة متكاملة من الدالات المشابهة لتلك الموجودة في الواجهات البرمجية ثنائية الأبعاد الشائعة، لذلك يمكن توليد الرسومات ديناميكياً. بعض الاستخدامات المتوقعة للوحة: الرسومات البيانية والصور المتحركة والألعاب وتركيب الصور.

للتفاعل مع اللوحة يجب الحصول على سياق تصيير اللوحة، والذي يحدد واجهة البرمجة المستخدمة, مثل واجهة برمجة اللوحة أو WebGL أو WebGL2.

مثال

النص البرمجي التالي يصنع عنصر لوحة في صفحة لغة توصيف النص الفائق:

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

باستخدام جافا سكريبت يمكن الرسم على اللوحة:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

هذا النص البرمجي يرسم مستطيلاً أحمر على اللوحة.

واجهة برمجة اللوحة توفر أيضاً «save()» و «restore()», لحفظ واسترجاع كل خصائص سياق اللوحة.

حجم عنصر اللوحة ومساحة الرسم

اللوحة في الواقع لديها حجمان: حجم العنصر نفسه وحجم مساحة الرسم للعنصر. تغيير صفات الطول والعرض يغير كلاهما؛ صفات سي إس إس تغير حجم العنصر فقط.

افتراضياً يكون حجم العنصر ومساحة الرسم 300بك بالعرض و150بك بالطول. في المثال المعروض, الذي يستخدم أوراق الأنماط المتتالية ليحدد حجم عنصر اللوحة, حجم العنصر 600بك بالعرض و300بك بالطول, لكن حجم مساحة الرسم يبقى على حاله الافتراضي: 300بك بالعرض و150بك بالطول. عندما لا يساوي حجم اللوحة حجم مساحة الرسم, يقوم المتصفح بتوسيع أو تقليص حجم مساحة الرسم لتطابق حجم العنصر (يمكن أن يتسبب ذلك بنتائج غير متوقعة وغير مرغوبة).

مثال يضبط حجم اللوحة وحجم مساحة الرسم لقيم مختلفة:

<!DOCTYPE html>
<html>
    <head>
    <title>Canvas element size: 600 x 300,
    Canvas drawing surface size: 300 x 150</title>
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
    </head>
    <body>
        <canvas id="canvas">
        Canvas not supported
        </canvas>
    </body>
</html>

الدعم في المتصفحات

تدعم النسخ الحالية من فيرفكس, وكروم, وإنترنت إكسبلورر, وسفاري, وأوبرا, ومايكروسوفت إيدج عنصر اللوحة.

انظر أيضاً

كايرو

مراجع

^ Ian Hixie (12 يوليو 2004). "Extending HTML". اطلع عليه بتاريخ 2011-06-13.
^ Mozilla Developer Connection. "HTMLCanvasElement". مؤرشف من الأصل في 2011-06-04. اطلع عليه بتاريخ 2011-06-13.

وصلات خارجية

[[تصنيف:إتش تي إم إل 5]]

[1] Ian Hixie (12 يوليو 2004). "Extending HTML". اطلع عليه بتاريخ 2011-06-13.

[2] Mozilla Developer Connection. "HTMLCanvasElement". مؤرشف من الأصل في 2011-06-04. اطلع عليه بتاريخ 2011-06-13.

[1]

[2]