HTML5画布文本标准教程

最新推荐文章于 2023-04-17 10:22:48 发布

limeiyans

最新推荐文章于 2023-04-17 10:22:48 发布

阅读量679

点赞数

分类专栏： HTML5画布文本标准教程文章标签： HTML5画布文本标准教程

本文链接：https://blog.csdn.net/limeiyans/article/details/19910521

版权

HTML5画布文本标准教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

limeiyans

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布文本标准教程

HTML5画布文本的文本标准,我们可以使用measureText()方法返回一个对象包含宽度属性。这个方法需要一个文本字符串,并返回一个度量对象基于提供的文本和当前文本字体分配给上下文。注意:由于高度的像素等于中的文本字体大小在pts字体和字体属性定义画布的背景下,度量对象measureText()不提供一个高度度量。 body { margi
复制链接

扫一扫

专栏目录