نص رسم على لوحة HTML

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

أهم الخصائص والأساليب لرسم النص على اللوحة هي:

  • font - تحديد خصائص الخط النصية
  • fillText(text,x,y) - رسم نص "ملون" على اللوحة
  • strokeText(text,x,y) - رسم النص على اللوحة (بدون ملء)

استخدام fillText()

مثال

اجعل الخط "30px Arial"، وقم بكتابة نص ملون على اللوحة:

على أنك لا تدعم علامة HTML5 Canvas.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

جرب بنفسك

استخدام strokeText()

مثال

اجعل الخط "30px Arial"، وقم بكتابة نص على اللوحة (بدون ملء):

على أنك لا تدعم علامة HTML5 Canvas.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

جرب بنفسك

إضافة اللون وتحديد النص في منتصف

مثال

اجعل الخط "30px Comic Sans MS"، وقم بكتابة نص ملون أحمر في منتصف اللوحة:

على أنك لا تدعم علامة HTML5 Canvas.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

جرب بنفسك

يرجى الرجوع إلى:

دليل مرجعي كامل لرسم على لوحة CodeW3C.com