canvas_5_绘制文本

最新推荐文章于 2024-04-23 12:07:19 发布

熙哥_tito

最新推荐文章于 2024-04-23 12:07:19 发布

阅读量111

点赞数

分类专栏： canvas 文章标签：前端

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131004717

版权

canvas 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

绘制文本的两种方式

ctx.fillText(text, x, y , maxWidth) 在指定的 (x,y) 位置填充指定的文本绘制的最大宽度(maxWidth)是可选的。

ctx.strokeText(text, x, y , maxWidth) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度(maxWidth)是可选的。

<!-- 文本样式

font = value 我们用来绘制文本的样式，使用和 CSS font 属性相同的语法，默认的字体是 10px sans-serif。

textAlign = value 文本对齐选项。可选的值包括：start, end, left, right or center。默认值是 start。

textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。

direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

<style>
   canvas {
     border: 1px solid #000;
   }
</style>

<body>
  <canvas id="can1" width="500" height="400"></canvas>
  <script>
    (() => {
      let canvas = document.getElementById("can1")
      if(!canvas.getContext) return
      let ctx = canvas.getContext("2d")
      ctx.font = "100px sans-serif"
      ctx.fillText("天龙八部", 50,100, 400)
      ctx.strokeText("天龙八部", 50,200, 400)

    })()
  </script>
</body>