HTML الوسم <canvas>

تعريفه

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

معلومة تقنية

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

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

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