64- مرجع HTML Canvas

يُعرّف عنصر <canvas> منطقة رسم نقطية في صفحة HTML. تسمح واجهة برمجة تطبيقات Canvas لـ JavaScript برسم رسومات على اللوحة. يمكن لـ Canvas API رسم الأشكال والخطوط والمنحنيات والمربعات والنصوص والصور بألوان وتدوير وشفافية ومعالجات بكسل أخرى.

يمكنك إضافة عنصر قماش في أي مكان في صفحة HTML باستخدام العلامة <canvas>:

مثال

<canvas id="myCanvas" width="300" height="150"></canvas>

يمكنك الوصول إلى عنصر <canvas> باستخدام طريقة HTML DOM getElementById().

للرسم على اللوحة، تحتاج إلى إنشاء كائن سياق ثنائي الأبعاد:

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ملحوظة

• لا يحتوي عنصر HTML <canvas> نفسه على قدرات الرسم. يجب عليك استخدام JavaScript لرسم أي رسومات.
• تقوم طريقة getContext() بإرجاع كائن يحتوي على أدوات (طرق) للرسم.

الرسم على اللوحة

بعد إنشاء سياق ثنائي الأبعاد، يمكنك الرسم على اللوحة.

ترسم طريقة fillRect() مستطيلًا أسودًا بزاوية علوية يسارية عند الموضع 20,20. يبلغ عرض المستطيل 150 بكسلًا وارتفاعه 100 بكسلًا.

مثال

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillRect(20, 20, 150, 100);

استخدام الألوان

تحدد خاصية fillStyle لون تعبئة كائن الرسم:

مثال

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

يمكنك أيضًا إنشاء عنصر <canvas> جديد باستخدام طريقة document.createElement()، وإضافة العنصر إلى صفحة HTML موجودة:

مثال

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

في هذه الأمثلة، سيتم رسم مستطيل أحمر بدلاً من الأسود. يمكنك تجربة قيم ألوان مختلفة مثل “blue” أو “green” أو “yellow” أو حتى رموز Hex مثل “#FF0000” للأحمر.

المسارات

الطريقة الشائعة للرسم على اللوحة هي:

1. بدء مسار – beginPath()
2. الانتقال إلى نقطة – moveTo()
3. الرسم داخل المسار – lineTo()
4. رسم المسار – stroke()

مثال

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

هذا المثال سيرسم شكلًا مثلثًا بسيطًا على اللوحة. يمكنك تجربة إضافة المزيد من النقاط باستخدام lineTo() لإنشاء أشكال أكثر تعقيدًا.

مرجع كامل لـ Canvas API

يغطي هذا المرجع جميع خصائص وأساليب كائن getContext("2d")، المستخدم لرسم النصوص والخطوط والمربعات والدوائر والصور والمزيد على اللوحة.

طرق الرسم

توجد 3 طرق فقط للرسم مباشرة على اللوحة:

طرق الرسم الأخرى، مثل رسم الخطوط والمنحنيات والدوائر، تعتمد على إنشاء المسارات ورسم الخطوط باستخدام طرق مثل beginPath() و moveTo() و lineTo() و arc() و stroke(). يمكن استخدام هذه الطرق لإنشاء أشكال أكثر تعقيدًا على اللوحة.

طرق المسارات

الدوائر والمنحنيات

النص

الألوان والأنماط والظلال

التحويلات

رسم الصور

كائن ImageData والتلاعب بالبكسل

يسمح لك كائن ImageData بالتلاعب ببيانات البكسل الفردية للصورة على اللوحة. يمكنك استخدام getImageData() للحصول على بيانات البكسل، واستخدام putImageData() لوضعها مرة أخرى على اللوحة بعد إجراء التعديلات.

التركيب

طرق أخرى

الخصائص والأحداث القياسية

يدعم كائن اللوحة أيضًا الخصائص القياسية و الأحداث الشائعة في عناصر HTML الأخرى، مثل:

• الخصائص: مثل width و height و backgroundColor و id و className و tabIndex و textContent و innerHTML وغيرها.
• الأحداث: مثل onclick و onmouseover و onmouseout و onkeydown و onkeyup و onchange وغيرها.

صفحات ذات صلة

• شرح HTML: HTML5 Canvas (شرح باللغة الإنجليزية)
• مرجع HTML: علامة HTML <canvas> (شرح باللغة الإنجليزية)

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

• عنصر <canvas> هو معيار HTML5 (منذ عام 2014).
• Canvas API مدعوم في جميع المتصفحات الحديثة:
  • Chrome: نعم
  • Edge: نعم
  • Firefox: نعم
  • Safari: نعم
  • Opera: نعم
  • IE: الإصدارات 9-11 (مع بعض القيود)