JavaScript Academy · درس

إعداد سياق Canvas

احصلوا على سياق العرض ثنائي الأبعاد واضبطوه.

إعداد سياق Canvas درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ما هي Canvas API؟

تتيح لك Canvas API رسم رسومات ثنائية الأبعاد باستخدام JavaScript داخل عنصر <canvas>. تحصل على مساحة رسم مكوّنة من وحدات بكسل، ومجموعة من الأوامر لرسم الأشكال والصور والنصوص.

الترميز هو وسم <canvas> واحد.
تتم كل عمليات الرسم في JavaScript من خلال كائن السياق.

<canvas id="board" width="320" height="200"></canvas>

الحصول على السياق

استدعِ getContext('2d') على عنصر canvas للحصول على CanvasRenderingContext2D. يمر كل أمر رسم عبر هذا الكائن.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

نظام الإحداثيات

النقطة الأصلية (0, 0) هي الزاوية العليا اليسرى. تزداد قيمة X نحو اليمين، وتزداد قيمة Y نحو الأسفل. تكون الزاوية السفلية اليمنى لعنصر canvas بحجم 320x200 عند (320, 200).

سمتا العرض والارتفاع

تحدد سمتا HTML، width وheight، حجم مخزن الرسم بوحدات البكسل. وتكون القيمة الافتراضية 300x150 عند حذفهما. يؤدي ضبطهما في JS أيضًا إلى مسح canvas.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

حجم CSS مقابل حجم المخزن

تؤدي سمتا CSS، width/height، إلى تمديد canvas على الشاشة، لكنهما لا تغيران مخزن البكسلات. إذا اختلفتا عن السمتين، فستبدو الرسومات ضبابية أو ممددة. حافظ على تزامنهما للحصول على مخرجات واضحة.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

معالجة الشاشات عالية الكثافة

تكون قيمة devicePixelRatio غالبًا 2 على شاشات Retina. كبّر حجم المخزن وصغّر مقياس السياق حتى تبقى الخطوط حادة.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

ضبط أنماط التعبئة والحدود

تُحفظ حالة الرسم في السياق. تضبط fillStyle لون التعبئة، بينما تضبط strokeStyle لون الحد الخارجي. ويقبل كلاهما أي سلسلة ألوان بصيغة CSS.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

الرسم الأول

بعد تجهيز السياق، يمكنك الرسم فورًا. ترسم fillRect(x, y, w, h) مستطيلًا مملوءًا باستخدام قيمة fillStyle الحالية.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

مسح canvas

تمسح clearRect(x, y, w, h) منطقة مستطيلة وتعيدها إلى حالة الشفافية. ويُعد مسح المخزن بالكامل الخطوة الأولى المعتادة في كل إطار من إطارات الحركة.

ctx.clearRect(0, 0, canvas.width, canvas.height);

حفظ الحالة واستعادتها

تدفع save() النمط/التحويل الحالي إلى مكدس، بينما تعيد restore() آخر حالة منه. يعزل ذلك التغييرات المؤقتة.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

اكتشاف الميزات

تحسّبًا للمتصفحات القديمة جدًا، تحقق من وجود getContext قبل استخدامه.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

اختبار سريع

اختبر مدى فهمك لإعداد canvas.

مراجعة: إعداد canvas

لقد تعلمت كيفية الحصول على canvas، واستدعاء getContext('2d')، وفهم النقطة الأصلية العليا اليسرى، وضبط حجم المخزن مقارنة بحجم CSS، ومعالجة الشاشات عالية الكثافة باستخدام devicePixelRatio، وإعداد fillStyle/strokeStyle. التالي: رسم الأشكال والمسارات.

الأسئلة الشائعة

هل درس «إعداد سياق Canvas» مجاني؟

نعم — نص درس «إعداد سياق Canvas» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعداد سياق Canvas»؟

احصلوا على سياق العرض ثنائي الأبعاد واضبطوه. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إعداد سياق Canvas»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy