Текстовые метрики HTML5 Canvas

Автор：Eve Cole Время обновления：2025-05-06 10:48:02

Wulin.com (www.vevb.com) Введение в статью: Чтобы получить текстовое измерение текста HTML5 Canvas, мы можем использовать метод Canvas Context SearuringText (). Этот метод требует текстовой строки и возвращает шрифт для предоставленного текста на основе объекта измерения и назначенного текущему тексту контекста.

Чтобы получить текстовые метрики HTML5 Canvas, мы можем использовать метод контекста Canvas of memureText (). Этот метод требует текстовой строки и возвращает шрифт для предоставленного текста на основе объекта измерения и назначенного текущему тексту контекста.

В настоящее время ширина текста является единственной мерой с помощью метода measureText (). Высокая метрическая система текста в настоящее время не поддерживается.

<! Doctype html>

<html>

<голова>

<style>

тело {

поля: 0px;

Заполнение: 50px;

}

#mycanvas {

Граница: 1PX SOLI #9C9898;

}

</style>

<Скрипт>

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 text = hello world!;

context.font = 30pt calibri;

context.textalign = center;

context.fillstyle = blue;

context.filltext (text, x, y);

// Получить текстовые метрики

var metrics = context.measuretext (text);

var width = metrics.width;

context.font = 20pt calibri;

context.textalign = center;

context.fillstyle = #555;

context.filltext (( + ширина + px Wide), x, y + 40);

};

</script>

</head>

</canvas>

</body>

</html>