كيفية كتابة نص في لوحة HTML

عيّن حجم اللوحة القماشية باستخدام CSS أو سمات عرض / ارتفاع HTML لتكون ، على سبيل المثال ، 200 × 400:

<canvas width="200" height="400"></canvas>

وتأكد أيضًا من تعيين خصائص العرض / الارتفاع لكائن لوحة الرسم في JavaScript ، لتجنب جعل النص ضبابيًا ، على سبيل المثال:

canvas.width = 1800
canvas.height = 1200

أول شيء ، الحصول على إشارة إلى لوحة قماشية

const canvas = document.querySelector('canvas')

وإنشاء كائن سياق منه:

const context = canvas.getContext('2d')

الآن يمكننا استدعاءfillText()طريقة كائن السياق:

context.fillText('hi!', 100, 100)

تأكد من تضمين إحداثيات x و y لنقطة البداية في حجم اللوحة القماشية.

يمكنك تمرير خصائص إضافية قبل الاتصالfillText()لتخصيص المظهر ، على سبيل المثال:

context.font = 'bold 70pt Menlo'
context.fillStyle = '#ccc'
context.fillText('hi!', 100, 100)

المزيد من دروس js: