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