<canvas>: عنصر CANVAS
آخر تحديث: 2026-10-13
<canvas>عنصر CANVAS
يرسم الرسوميات والحركة والمخططات عبر JavaScript (2D أو WebGL)؛ الوسم مجرد لوحة فارغة يملؤها السكربت.
| الفئة | البرامج النصية والتضمين |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </canvas> وسم |
| الحالة | قياسي |
📝 البنية
<canvas width="300" height="150"></canvas>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
width | Canvas width in pixels, default 300. | |
height | Canvas height in pixels, default 150. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <canvas> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： canvas لا يرسم بنفسه — استخدم getContext في JS؛ ادمجه مع تحجيم CSS للشاشات عالية الدقة.
❓ الأسئلة الشائعة
Qما الفرق بين canvas و SVG؟
A
<canvas> رسم نقطي: يرسم JS البكسلات إطارًا بإطار، فيناسب الألعاب والعدد الكبير من العناصر الرسومية والمرشحات اللحظية، لكنه يتشوش عند التكبير؛ وSVG رسم متجهي تصف عُقده الشكل، فيتكبّر دون فقدان جودة ويناسب الأيقونات والرسوم البيانية. اختر canvas لإعادة الرسم عالية التردد على مستوى البكسل، وSVG للرسومات المتجهية التفاعلية.Qلماذا لا تُضبط أبعاد canvas عبر CSS؟
Aلـ canvas بُعدان: سمات HTML
width/height هي عدد بكسلات مخزن الرسم (الافتراضي 300×150)، بينما أبعاد CSS مجرد تمدد للعرض. تغيير الحجم عبر CSS وحده يمدد المخزن فيتشوه الصورة ويتشوش — الصواب ضبط قيمتي السمة مع أبعاد CSS معًا، أو القياس وفق devicePixelRatio.Qهل تُفهرس محركات البحث محتوى canvas؟
Aلا — داخل canvas بكسلات فحسب، لا نصوص ولا DOM يمكن زحفها. ضع النصوص المهمة خارج canvas (عناوين وأوصاف وبديلًا للوصولية)، وفي التطبيقات المعقدة يُنصح بتوفير محتوى DOM احتياطيًا داخل الوسم كحل بديل.
🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
