Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

HTMLالوسم <canvas>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

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

إفتراضياً يتم تخصيص مساحة يبلغ طولها 150 بكسل و عرضها 300 بكسل له حتى ترسم بداخلها و بالطبع يمكنك تحديد حجمها و عرضها بالحجم المناسب.

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1.5 9 2 37 18 4 10.1 1 1.0

خصائصه

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


الخاصية height

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1.5 9 2 37 18 4 10.1 1 1.0

الخاصية width

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1.5 9 2 37 18 4 10.1 1 1.0

إستخدامه

في المثال التالي قمنا بإضافة <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 كما سبق و فعلنا. و في حال كانت مساحته غير ثابتة أو تتغير نسبةً لحجم شاشة المستخدم فهنا تفعل ذلك بواسطة كود تكتبه بلغة جافاسكربت.