Canvas--文字

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

### 文章目录 ###

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

# 文字的绘制 #

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]

# 文字的对齐 #

## 水平对齐 ##

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]

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

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

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

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

![\[外链图片转存失败(img-vUMSKUJq-1562164520105)(http://note.youdao.com/yws/res/15966/00F8CC6D29264F18A2741B842382350B)\]][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)\]][img-VyyzGpvm-1562164520107_https_note.youdao.com_src_43581B4BCD784907877D77D3F150F355]

# 获取文本宽度 #

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20211214/eb726f0370844d0eb41fd13251b82ed1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]: /images/20211214/6041f14f45804d2bb10013f573befde8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]: /images/20211214/1846f23988da48bb8e05db8a75bda932.png
[img-vUMSKUJq-1562164520105_http_note.youdao.com_yws_res_15966_00F8CC6D29264F18A2741B842382350B]: /images/20211214/031d14078fb4417582d9ef6047b99d76.png
[img-VyyzGpvm-1562164520107_https_note.youdao.com_src_43581B4BCD784907877D77D3F150F355]: /images/20211214/a857bc5bddaa454cb456aba3d4a78254.png