تعليمات HTML Canvas

عنصر <canvas> HTML يستخدم للرسم على صفحة الويب.

تم إنشاء الرسومات المذكورة أعلاه باستخدام <canvas>.

يظهر أربعة عناصر: مستطيل أحمر، مستطيل متدرج، مستطيل متعدد الألوان ونص متعدد الألوان.

ما هو Canvas في HTML؟

يستخدم عنصر HTML <canvas> لرسم الرسوم ديناميكيًا من خلال البرمجة (عادةً باستخدام JavaScript).

عنصر <canvas> هو مجرد حاوية للرسوم. يجب استخدام البرمجة لرسم الرسوم الفعلية.

يوجد العديد من الطرق التي يمكن استخدامها في Canvas للرسم على المسارات، الفواصل، الدوائر، النصوص وإضافة الصور.

يمكن رسم النصوص على Canvas

يمكن رسم نصوص ملونة على Canvas ويمكن أن تأتي مع تأثيرات متحركة.

يمكن رسم الرسوم على Canvas

يتمتع Canvas بمقدرة قوية على عرض البيانات الرسومية باستخدام الرسوم والرسوم البيانية.

يمكن تحريك Canvas

يمكن تحريك كائن Canvas. كل شيء ممكن: من كرة رياضية بسيطة إلى رسوم متحركة معقدة.

Canvas يمكن التفاعل معها

يمكن للـ Canvas الرد على أحداث JavaScript.

يمكن للـ Canvas الرد على أي عملية مستخدمة (نقر المفاتيح، نقر الفأرة، نقر الزر، تحريك الأصابع).

يمكن استخدام Canvas في الألعاب HTML

يقدم طريقة Canvas للرسوم المتحركة العديد من الإمكانيات للعبة التفاعلية HTML.

مثال على Canvas

في HTML، يبدو عنصر <canvas> هكذا:

<canvas id="myCanvas" width="200" height="100"></canvas>

عنصر <canvas> يجب أن يحتوي على خاصية id حتى يمكن استخدامها من قبل JavaScript.

خصائص width و height ضرورية أيضًا لتعريف حجم اللوحة.

نصيحة: يمكن أن يحتوي صفحة HTML على عدة عناصر <canvas>.

بالتشابه، لا يوجد حاشية أو محتوى داخل عنصر <canvas>.

لإضافة حاشية، استخدم خاصية style:

مثال

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

جرب بنفسك

التعريف التالي سيقوم بشرح كيفية رسم على اللوحة.

يرجى الرجوع أيضًا إلى:

دليل مرجعي كامل لـ Canvas على CodeW3C.com

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

<canvas> هو جزء من معيار HTML5 (2014).

جميع المتصفحات الحديثة تدعم <canvas>：