HTML5 Canvas的文本度量

2012-04-13 01:36:55  来源:网页教学网 

钱柜娱乐Webjx文章简介:要获得HTML5 Canvas的文本的文本度量,我们可以使用的measureText()的画布上下文的方法 。这种方法需要一个文本字符串,并返回一个度量对象的基础上提供的文本,并分配给上下文的当前文本的字体。

要获得HTML5 Canvas的文本度量,我们可以使用的measureText()的画布上下文的方法 。这种方法需要一个文本字符串,并返回一个度量对象的基础上提供的文本,并分配给上下文的当前文本的字体。

  1. var metrics = context.measureText(text);
  2. var width = metrics.width;
目前,文本的宽度是唯一的度量与measureText()的方法 。目前还不支持文本的高度公制。

 


<!DOCTYPE HTML>

<html>

    <head>

        <style>

            body {

                margin: 0px;

                padding: 50px;

            }
            #myCanvas {
                border: 1px 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 text = "Hello World!";

                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>

更多