HTML5画布文本标准教程

来源：互联网发布：淘宝top排行榜在哪里编辑：程序博客网时间：2024/05/29 19:07

HTML5画布文本的文本标准,我们可以使用measureText()方法返回一个对象包含宽度属性。这个方法需要一个文本字符串,并返回一个度量对象基于提供的文本和当前文本字体分配给上下文。

注意:由于高度的像素等于中的文本字体大小在pts字体和字体属性定义画布的背景下,度量对象measureText()不提供一个高度度量。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="200"></canvas>    <script>      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>  </body></html>

0 0