جاري التحميل...

Canvas في HTML

سابقاً وضع SVG أيقونات وأشكالاً حادة كوسم متجه أو ملف .svg. هذا الدرس يقدّم canvas: صندوق نقطي فارغ يلوّنه JavaScript. HTML يضع السطح ويضبط الحجم فقط؛ السكربت يرسم البكسل. النطاق عملي — العنصر ورسم ثنائي صغير — لا دورة كاملة لـ Canvas API أو الألعاب أو WebGL.

لماذا canvas في دورة HTML

المبتدئ يقابل canvas في الرسوم البيانية والألعاب المصغرة. معرفة التقسيم تساعد: HTML يملك العنصر؛ JS يملك البكسل. بعد رسوم SVG الوسمية، canvas يُظهر أداة الرسم الشائعة الأخرى. يكفي هنا getContext("2d") وfillRect لإثبات الفكرة.

إجابة مباشرة

1) أضف canvas مع id وwidth وheight ونص احتياطي. 2) في JS استدعِ getContext("2d"). 3) ارسم بـ fillStyle وfillRect. 4) السمات تضبط دقة الصورة النقطية. 5) فضّل SVG للأيقونات؛ canvas للرسم الديناميكي. 6) هذه مقدمة فقط.

📊 Canvas vs SVG for beginners

Topic	Canvas	SVG
Drawing model	Bitmap pixels via JavaScript	Vector shapes in markup (or .svg file)
Who paints	Scripts on a 2d (or other) context	Browser renders SVG tree
Best beginner fit	Dynamic charts, games, freehand	Icons, logos, sharp UI marks
Scales when resized	Can blur if only CSS-stretched	Stays sharp as vectors
Accessible naming	Label the canvas; drawings are pixels	alt / aria-label on meaningful graphics
This course depth	Element + tiny 2d draw	Embed inline or via img

عنصر canvas صغير

بلا سكربت يكون canvas مستطيلاً فارغاً. مهمة HTML إعلان الحجم وid ليجدها السكربت.

Canvas shell with fallback

html

HTML Code

<canvas id="demo" width="300" height="150">
Your browser does not support canvas drawing.
</canvas>

قراءة الغلاف

canvas ينشئ سطح الرسم
width/height يضبطان حجم الصورة النقطية
id يتيح اختيار العنصر
النص بين الوسوم احتياطي
CSS قد يمدّد العرض فيحدث تمويه
بخلاف SVG لا توجد أشكال أبناء في HTML

رسم مستطيل بسياق ثنائي الأبعاد

بعد الغلاف، سكربت قصير يلوّن. getContext("2d") يعيد واجهة 2d؛ fillRect يملأ مستطيلاً.

Canvas plus fillRect

html

HTML Code

<canvas id="c" width="300" height="150">
Canvas drawing is not available in this browser.
</canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#248";
ctx.fillRect(20, 20, 120, 80);
</script>

قراءة استدعاءات الرسم

getElementById يجد canvas
getContext("2d") يفتح واجهة الرسم
fillStyle يضبط اللون
fillRect يملأ مستطيلاً
بلا سكربت يظهر الاحتياطي فقط
التالي web storage لحفظ البيانات

اختيار canvas مقابل SVG

شعار ثابت حاد: SVG
بكسل يتحدث كثيراً: canvas
أشكال كـ DOM للتنسيق: غالباً SVG
تفكير منطقة بكسل: canvas
شارة بسيطة: غالباً SVG
WebGL/ألعاب كاملة: خارج هذه المقدمة

تمرين — canvas في الصفحة

الصق الغلاف.
أضف السكربت؛ أكّد المستطيل.
غيّر الألوان والأرقام.
أزل السكربت مؤقتاً.
مدّد بـ CSS فقط ولاحظ التمويه.
جملة: canvas سطح نقطي JS؛ SVG وسم متجه.
التالي web storage.

أخطاء سهلة

توقع أشكال من HTML وحده
نسيان النص الاحتياطي
استخدام canvas لشعارات تناسب SVG
خلط canvas مع SVG
تغيير حجم CSS فقط
اعتبار المقدمة دورة Canvas كاملة
ترك canvas بلا تسمية عند المعنى

ملخص

canvas سطح نقطي فارغ بحجم HTML
JavaScript يرسم عبر getContext("2d") وfillRect
SVG للأيقونات؛ canvas للبكسل الديناميكي
النص الاحتياطي يساعد عند عدم الدعم
SVG كان متجهاً؛ هنا بكسل بالسكربت
التالي: web storage في HTML

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة