Canvas--文字

待我称王封你为后i 2021-12-14 22:07 694阅读 0赞

文章目录

  • 文字的绘制
  • 文字的对齐
    • 水平对齐
    • 垂直居中
  • 获取文本宽度

文字的绘制

在Canvas中绘制文字，可以使用strokeText或fillText方法。从名字上可以看出，一个是用填充方法而另一个则是用描边方法。

  1. const myCanvas = document.getElementById('myCanvas');
  2. const ctx = myCanvas.getContext('2d'); 
  3. let str = 'Hello World';
  4. ctx.strokeText(str, 100, 100);

strokeText或fillText都接受3个参数，分别是需要绘制的文字内容

在这里插入图片描述

  1. const myCanvas = document.getElementById('myCanvas');
  2. const ctx = myCanvas.getContext('2d'); 
  3. ctx.font = "50px sans-serif";
  4. let str = 'Hello World';
  5. ctx.fillText(str, 100, 100);

在这里插入图片描述

文字的对齐

水平对齐

文字的水平对齐可以用textAlign属性来控制，分别有“left”，“center”，“right”。

  1. const myCanvas = document.getElementById('myCanvas');
  2. const ctx = myCanvas.getContext('2d'); 
  3. ctx.font = "50px sans-serif";
  4. ctx.textAlign = 'center';
  5. let str = 'Hello World';
  6. ctx.fillText(str, 100, 100);

那如果我希望文字居中显示是不是像上面将textAlign属性的值赋成“center”就行了？先看看效果。

在这里插入图片描述

可以看到文字并没有居中，相反还往左边移了，这是怎么回事？

原因是文字位置的计算方法。textAlign属性实际上设置的是文字水平位置计算的起始位置，默认为“left”。结合上面的代码，例子中的文字的水平位置是“最左侧在x轴正方向100px的位置”。

而将其改成“center”，则意味着文字的正中间位于x轴正方向100px的位置上，自然整体是向左移的。

不过现在仅需要将文字的水平位置修改为容器宽度的一半就可以了。

\[外链图片转存失败(img-vUMSKUJq-1562164520105)(http://note.youdao.com/yws/res/15966/00F8CC6D29264F18A2741B842382350B)\]

垂直居中

垂直居中与水平居中原理是一样的。只不过垂直居中是修改textBaseline属性，该属性有3个值：“top”，“middle”，“bottom”。

那么想要垂直居中，就需要把textBaseline的值修改为“middle”，然后将垂直位置修改为容器高度的一半。

\[外链图片转存失败(img-VyyzGpvm-1562164520107)(https://note.youdao.com/src/43581B4BCD784907877D77D3F150F355)\]

获取文本宽度

通过measureText方法可以获取文本的宽度

  1. const myCanvas = document.getElementById('myCanvas');
  2. const ctx = myCanvas.getContext('2d'); 
  3. let width = ctx.measureText(str).width;

发表评论

表情：
评论列表 （有 0 条评论，694人围观）

还没有评论，来说两句吧...

相关阅读

    相关 文字

    ╰☆ゞ皮卡皮卡significant otherゞ☆╮ 这一生里，爱我和我爱的，无论给我的是快乐还是痛苦，都是来度我的，使我明白世间悲欢离合。明知道没有结果，却还是禁不住回首

    妖狐艹你老母妖狐艹你老母/ 0 赞/ 347 阅读