دليل HTML

مدير العلامات HTML

خاصية textBaseline لـ HTML canvas

textBaseline هو خاصية في API Canvas 2D التي تصف خط الأساس الحالي لرسم النص.

النموذج عبر الإنترنت

رسم خط أحمر عند y = 100، ثم ضع كل كلمة في y = 100 مع textBaseline مختلفة:

النموذج

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　textBaseline属性使用-التعليمات الأساسية (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//رسم خط أحمر على y = 100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//كل كلمة في y = 100 لها قيمة textBaseline مختلفة
ctx.textBaseline="top";　
ctx.fillText("Top",5,100);　
ctx.textBaseline="bottom";　
ctx.fillText("Bottom",50,100);　
ctx.textBaseline="middle";　
ctx.fillText("Middle",120,100);　
ctx.textBaseline="alphabetic";　
ctx.fillText("Alphabetic",190,100);　
ctx.textBaseline="hanging";　
ctx.fillText("Hanging",290,100);　
</script>
</body>
</html>

اختبار لمعرفة ‹/›

توافق المتصفحات

إيفايرفوكسأوبراكرومسفاري

يدعم متصفحات إنترنت إكسبلورر 9، فايرفوكس، أوبرا، كروم وسفاري خاصية textBaseline. خصائص.

ملاحظة:تختلف تأثير خاصية textBaseline بين المتصفحات المختلفة، خاصة عند استخدام "hanging" أو "ideographic".

ملاحظة:يستخدم متصفح إنترنت إكسبلورر 8 وأقل من إصداراته ألا يدعم عنصر <canvas>.

التعريف والاستخدام

تحدد خاصية textBaseline أو تعيد القيمة الحالية للخط الأساسي الحالي المستخدم في رسم النص.

الشكل التالي يوضح أنواع الأسس التي يدعمها خاصية textBaseline:

ملاحظة:fillText() وstrokeText() يستخدم الطريقة عند تحديد موقع النص على اللوحة، سيتم استخدام قيمة textBaseline المحددة.

القيمة الافتراضية:	alphabetic
جملة JavaScript:	سياق.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

قيمة الخاصية

القيمة	الوصف
alphabetic	الافتراضي. أساس النص هو الخط الأساسي العادي للكتابة.
أعلى	أساس النص هو أعلى صندوق em.
hanging	أساس النص هو الخط الأساسي المعلق.
منتصف	أساس النص هو منتصف صندوق em.
ideographic	أساس النص هو الخط الأساسي للمعاني.
أسفل	أساس النص هو أسفل صندوق em.

دليل مرجع HTML canvas

HTML: <template> العلامة