❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals 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>
<!-- 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 { height: 150px; width: 300px; }

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

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

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

عودة للدرس❯ ❮عودة للدرس