رسم النصوص في لوحة الرسم في HTML5

يمكن لـ HTML5 Canvas رسم النص باستخدام أنواع الخطوط المختلفة، والحجم والحجم، ويتم التحكم في مظهر النص في هذه الخاصيات font للسياق 2D، لرسم النص، استخدم وظائف fillText() أو strokeText()

المثال عبر الإنترنت

يمكن رسم النص على لوحة الرسوم الديناميكية HTML5 باستخدام أنواع الخطوط المختلفة، والحجم والحجم.
يتحكم مظهر النص في هذه الخاصيات font للسياق 2D. بالإضافة إلى ذلك، يجب عليك تعيين fillStyle أو strokeStyle الخاصية 2D Context بناءً على ما إذا كنت ترسم نصًا ملونًا أم غير ملون.
لرسم النص، استخدم وظائف fillText() أو strokeText()
هذا مثال بسيط من الكود:

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
　　　var canvas = document.getElementById("ex1");
　　　var context = canvas.getContext("2d");
　　　context.font = "36px Verdana";
　　　fillStyle = "#000000";
　　　context.fillText("HTML5　Canvas　Text", 50, 50);
　　　context.font = "36px Arial";
　　　context.strokeStyle = "#000000";
　　　context.strokeText("نص لوحة الرسوم الديناميكية HTML5", 50, 90);
　</script>

هذا هو الناتج عند رسم النص على اللوحة:

الخط والنمط

عند رسم النص على لوحة الرسوم الديناميكية HTML5، يجب تعيين الخط المستخدم. يتم ذلك عن طريق تعيين قيمة خاصية الخط في سياق 2D. هذا الخاصية هي سلسلة تحتوي على قيم متوافقة مع CSS، وتكون صيغتها:

[نمط الخط][وزن الخط][حجم الخط][نوع الخط]

على سبيل المثال

context.font = "normal normal 20px Verdana";

يمكنك تعيين القيم التالية لكل جزء من نص الخط:

لا تدعم كل متصفح كل القيم. يجب اختبار القيم التي تخطط لاستخدامها قبل الاعتماد عليها.
هذا مثال آخر:

"italic bold 36px Arial"

نص الرسم

كما ذكرنا سابقًا، يمكنك رسم نص ملون أو نص مظلل عند رسم النص على لوحة HTML5. يمكنك استخدام دالة fillText() من سياق الـ 2D وstrokeText() للقيام بذلك. تعريف هذه الدوال كالتالي:

fillText (textString, x, y[, maxWidth]);
strokeText (textString, x, y[, maxWidth]);

المعامل textString هو النص الذي سيتم رسمه.
في x و y يمثلان المواقع التي يتم الحصول عليها في النص. المعامل x هو المكان الذي يبدأ النص فيه. المعامل y هو المكان الذي يتم وضع النص فيه عموديًا، ولكن الطريقة الدقيقة تعتمد على خط الأساس. سيتم شرح خط الأساس في الجزء التالي.
يتم تغطية نص maxWidth في الجزء السفلي.
هذا مثال على الكود:

context.font = "36px Verdana";
fillStyle = "#000000";
context.fillText("HTML5　Canvas　Text", 50, 50);

عرض النص الأقصى

يخبر المعامل maxWidth الخريطة أن النص لا يمكن أن يستخدم مساحة أكبر من المعامل المحدد. إذا كان النص واسعًا ولا يمكن احتواءه في maxWidth، يتم ضغط عرض النص. لا يتم قطعه. هذا مثال على استخدام maxWidth مع نفس النصين:

context.font = "36px Verdana";
fillStyle = "#000000";
context.fillText("HTML5　Canvas　Text", 50, 50);
context.fillText("HTML5　Canvas　Text", 50, 100, 200);

هذا هو شكل النصين عند رسمه على لوحة HTML5:

كما ترون، تم ضغط عرض النص الثاني لتكون مناسبًا لـ maxWidth 200 بكسل.

لون النص

مثل أي شكل آخر، يمكنك تعيين لون التعبئة أو الرسم حول النص باستخدام خصائص fillStyle و strokeStyle من سياق الـ 2D. لن أشرح هذه الخصائص بشكل مفصل هنا. لمزيد من التفاصيل، يرجى الرجوع إلىالرسم بالخطوط والملء.

قياس عرض النص

هيئة السياق 2D لديها ميزة قياس عرض النص ببكسل. لا يمكنها قياس الارتفاع. يتم تسمية هذه الوظيفة measureText(). هذا مثال على الرمز:

النص = context.measureText("measure this");
العرض = textMetrics.width;

قياس عرض النص يمكن استخدامه لتحديد ما إذا كان نصًا معينًا يتوافق مع مساحة معينة أم لا.

خطوط الأساس

تحدد خطوط الأساس كيفية تفسير وتفسير المعلمة y. بمعنى آخر، موقع النص العمودي وموضع تفسير ذلك. يرجى ملاحظة أن هناك أيضًا فرق صغير قد يحدث في كيفية تفسير هذا المفتاح من قبل المتصفحات.
يتم تعيين خطوط الأساس باستخدام الخاصية textBaseline2D للسياق النصي. إليك القيم التي يمكن أن تأخذها وأهميتها:

هذا مثال، حيث يستخدم y نفس القيمة (75) لرسم النصوص، ولكن لكل نص يتم استخدامه أساسيات مختلفة. سيتم رسم خط y = 75، ليظهر لك كيفية إعداد خطوط الأساس حول قيمة y هذه.

الآتي هو رمز إنشاء الشكل المذكور أعلاه:

strokeStyle = "#000000";
lineWidth = 1;
beginPath();
الخط النصي.moveTo(0, 75);
الخط النصي.lineTo(500, 75);
stroke();
closePath();
font = "16px Verdana";
fillStyle = "#000000";
الخط النصي = "top";
الخط النصي.fillText("top", 0, 75);
الخط النصي = "hanging";
الخط النصي.fillText("hanging", 40, 75);
الخط النصي = "middle";
الخط النصي.fillText("middle", 120, 75);
الخط النصي = "alphabetic";
fillText("alphabetic", 200, 75);
textBaseline = "ideographic";
fillText("ideographic", 300, 75);
textBaseline = "bottom";
fillText("bottom-glyph", 400, 75);

توازي النص

تعرف خاصية textAlign في سياق 2D كيفية مستوى التساوي للنص أثناء الرسم. بمعنى آخر، تعرف خاصية textAlign موقع x الذي يتم فيه رسم النص.

فيما يلي بعض الأمثلة التي تظهر كيفية عمل خاصية textAlign. يتم رسم الخطوط العمودية في x = 250. يتم رسم جميع النصوص أيضًا في x = 250، ولكن قيمة خاصية textAlign مختلفة.

هذا مثال على رمز الرسم:

<canvas id="ex4" width="500" height="120" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas غير مدعوم
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
strokeStyle = "#000000";
lineWidth = 1;
beginPath();
moveTo(250, 0);
lineTo(250, 250);
stroke();
closePath();
font = "16px Verdana";
fillStyle = "#000000";
text-align = "center";
context.fillText("center", 250, 20);
context.textAlign = "start";
context.fillText("start", 250, 40);
context.textAlign = "end";
context.fillText("end", 250, 60);
context.textAlign = "left";
context.fillText("left", 250, 80);
context.textAlign = "right";
context.fillText("right", 250, 100);
</script>

نتائج تشغيل الكود كالتالي: