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