HTML5画布文本中风教程

最新推荐文章于 2021-06-04 06:47:59 发布

limeiyans

最新推荐文章于 2021-06-04 06:47:59 发布

阅读量542

点赞数

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

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

版权

HTML5画布文本中风教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

设置中风文本使用HTML5画布的颜色,我们可以设置strokeStyle属性画布的背景颜色的字符串,十六进制值,或RGB值,然后使用strokeText中风的文本()方法。

注意:为HTML5画布设置填充和中风文本,您必须使用fillText()和strokeText()方法。Ita€™s良好实践使用fillText strokeText前()方法()方法,以正确呈现中风厚度。

<!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 = 80;
      var y = 110;

      context.font = '60pt Calibri';
      context.lineWidth = 3;
      // stroke color
      context.strokeStyle = 'blue';
      context.strokeText('Hello World!', x, y);
    </script>
  </body>
</html>