HLJ 发布于
2018-08-20 11:05:25

HTML5 Canvas fillText方法和font属性设置文本字体,大小等样式

上一篇文章:

HTML5 Canvas 图像加载

下一篇文章:

HTML5 Canvas设置文本颜色

要使用HTML5 Canvas绘制文本,我们可以使用canvas fillText()方法。
要设置HTML5 Canvas文本的字体,大小和样式,我们可以将canvas上下文的font属性设置为包含字体样式,大小等,并用空格分隔。 样式可以是正常,斜体或粗体。 除非另有说明,否则字体样式默认为正常。
一旦设置了font属性,我们就可以使用fillText()方法绘制文本,该方法需要一个字符串以及x和y位置。
html代码:
<!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');

      context.font = 'italic 40pt Calibri';
      context.fillText('Hello World!', 150, 100);
    </script>
  </body>
</html>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-20/152.html
最后生成于 2023-06-18 18:37:53
上一篇文章:

HTML5 Canvas 图像加载

下一篇文章:

HTML5 Canvas设置文本颜色

此内容有帮助 ?
0