HTMLالوسم <canvas>

تعريفه

نستخدم الوسم <canvas> لعرض رسومات بداخل مساحة محددة في الصفحة مع الإشارة إلى أن الرسومات التي يتم عرضها بداخله يتم رسمها و تحريكها بواسطة كود جافاسكربت.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <canvas>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية height

نضيفها للوسم لتحديد كم سيكون طوله في الصفحة, و الرقم الذي تمرره لها كقيمة يمثل الطول بالبكسل ( Pixel ).

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية width

نضيفها للوسم لتحديد كم سيكون عرضه في الصفحة, و الرقم الذي تمرره لها كقيمة يمثل العرض بالبكسل ( Pixel ).

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بإضافة <canvas> مع تحديد طوله و عرضه و رسم 3 مربعات بداخله.

<!-- myCanvas يساوي id طوله 300 بكسل و عرضه 300 بكسل و يملك <canvas> هنا قمنا بإضافة -->
<canvas id="myCanvas" height="300" width="300">
    Your browser does not support the canvas tag!
</canvas>

<!-- بواسطة كود جافاسكربت <canvas> هنا قمنا برسم و تلوين 3 مربعات بداخل الوسم -->
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 75, 50);
    ctx.globalAlpha = 0.4;
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 75, 50);
    ctx.fillStyle = "green";
    ctx.fillRect(80, 80, 75, 50);
</script>

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

canvas {
    height: 150px;
    width: 300px;
}

نصائح و ملاحظات

حين تدرس لغة جافاسكربت ستتعلم كيفية الرسم بداخل الوسم <canvas> باحترافية و ستتعرف على دوال كثيرة مخصصة للرسم.
الآن يهمك فقط معرفة ما هو دور هذا الوسم و ليس مطلوباً منك أيضاً أن تتعمق به لأنك ستتعلمه لاحقاً.

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