HTML5 Canvas的文本度量

2024-08-26 00:16:53

字體：大中小

供稿：網(wǎng)友

武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：要獲得HTML5 Canvas的文本的文本度量，我們可以使用的measureText（）的畫(huà)布上下文的方法。這種方法需要一個(gè)文本字符串，并返回一個(gè)度量對(duì)象的基礎(chǔ)上提供的文本，并分配給上下文的當(dāng)前文本的字體。

要獲得HTML5 Canvas的文本度量，我們可以使用的measureText（）的畫(huà)布上下文的方法。這種方法需要一個(gè)文本字符串，并返回一個(gè)度量對(duì)象的基礎(chǔ)上提供的文本，并分配給上下文的當(dāng)前文本的字體。

目前，文本的寬度是唯一的度量與measureText（）的方法。目前還不支持文本的高度公制。

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 50px;

            }
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>

                context.font = "30pt Calibri";
                context.textAlign = "center";
                context.fillStyle = "blue";
                context.fillText(text, x, y);
                // get text metrics
                var metrics = context.measureText(text);
                var width = metrics.width;
                context.font = "20pt Calibri";
                context.textAlign = "center";
                context.fillStyle = "#555";
                context.fillText("(" + width + "px wide)", x, y + 40);
            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>