Wulin.com (www.vevb.com) مقدمة مقدمة: للحصول على قياس النص لنص Canvas HTML5 ، يمكننا استخدام طريقة سياق MeasuringText (). تتطلب هذه الطريقة سلسلة نصية وإرجاع خط للنص المقدم بناءً على كائن قياس وتعيينه إلى النص الحالي للسياق.
للحصول على مقاييس النص HTML5 Canvas ، يمكننا استخدام طريقة سياق Canvas لـ MESURETEXT (). تتطلب هذه الطريقة سلسلة نصية وإرجاع خط للنص المقدم بناءً على كائن قياس وتعيينه إلى النص الحالي للسياق.
حاليًا ، يكون عرض النص هو المقياس الوحيد مع طريقة MESURETEXT (). لا يتم دعم نظام النص العالي للنص حاليًا.
<! doctype html>
<html>
<head>
<style>
جسم {
الهامش: 0px ؛
الحشو: 50 بكسل ؛
}
#mycanvas {
الحدود: 1 بكسل Solid #9C9898 ؛
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById (mycanvas) ؛
var context = canvas.getContext (2d) ؛
var x = canvas.width / 2 ؛
var y = canvas.height / 2 - 10 ؛
نص var = Hello World! ؛
context.font = 30pt calibri ؛
context.textalign = المركز ؛
context.fillStyle = Blue ؛
context.fillText (text ، x ، y) ؛
// احصل على مقاييس النص
var metrics = context.measureText (text) ؛
var width = metrics.width ؛
context.font = 20pt calibri ؛
context.textalign = المركز ؛
context.fillStyle = #555 ؛
context.fillText (( + width + px wide) ، x ، y + 40) ؛
} ؛
</script>
</head>
<body onmousedown = return false ؛>
<canvas id = عرض mycanvas = 578 ارتفاع = 200>
</canvas>
</body>
</html>