Canvas学习记录之fillText

旧城等待， 2023-07-14 10:45 4阅读 0赞

###### *最新更新时间：2020年03月14日16:20:22* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

#### 概述 ####

> 本文内容：本文介绍基于`fillText()`绘制文本的一些基本用法，基本文本(字号、色值、字体)、填充文本、描边文本、自动换行文本、左对齐、右对齐、水平居中、垂直居中、在水平方向基于x轴某点中心对称、水平垂直居中

#### fillText(text, x, y \[, maxWidth\]); ####

>  *  在 (x, y)位置填充文本
>  *  四个参数依次为：填充的文本、起点x轴坐标、起点y轴坐标、最大宽度`(如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。)`

*  在画布原点坐标绘制填充文本

ctx.fillStyle = '#000';
    ctx.font = "20px serif";
    ctx.textBaseline = "top";
    ctx.fillText("wan shao bo", 0, 0);

![在这里插入图片描述][20200314150133528.png]

*  在画布原点坐标绘制描边文本

ctx.fillStyle = '#000';
    ctx.font = "40px serif";
    ctx.textBaseline = "top";
    ctx.strokeText("wan shao bo", 0, 0);

![在这里插入图片描述][20200314150617543.png]

*  在画布原点坐标绘制渐变描边文本

var gradient = ctx.createLinearGradient(0,0,500,0);
    gradient.addColorStop(0,"#000");
    gradient.addColorStop(0.1,"#7FFFAA");
    gradient.addColorStop(0.2,"#0000FF");
    gradient.addColorStop(0.3,"#00FFFF");
    gradient.addColorStop(0.4,"#7CFC00");
    gradient.addColorStop(0.5,"#FFDEAD");
    gradient.addColorStop(0.6,"#FF7F50");
    gradient.addColorStop(0.7,"#FFB6C1");
    gradient.addColorStop(0.8,"#7FFFAA");
    gradient.addColorStop(0.9,"#ff77ff");
    gradient.addColorStop(1,"#000");
    ctx.strokeStyle = gradient;
    ctx.textAlign = "left";
    ctx.font = "100px serif";
    ctx.textBaseline = "top";
    ctx.strokeText("wanshaobo", 0, 0);

![在这里插入图片描述][20200314172232385.png]

*  fillStyle

>  *  设置文字颜色

*  font

>  *  设置`"font-style font-variant font-weight font-size/line-height font-family"`
>  *  必需设置的两个属性`"font-size 和 font-family"`

*  textBaseline

> 文本基线，决定文字垂直方向的对齐方式
> 
>  *  top，文本基线在文本块的顶部。
>  *  hanging，文本基线是悬挂基线
>  *  middle，文本基线在文本块的中间。
>  *  alphabetic，文本基线是标准的字母基线。
>  *  ideographic，文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
>  *  bottom，文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
>  *  默认值是 alphabetic

#### 绘制自动换行文本 ####

> fillText()，绘制单行文本，并且不会换行  
> measureText()，返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）

ctx.fillStyle = '#000';
    ctx.font = "14px serif";
    ctx.textBaseline = "top";
    var text = "ds这段444文本不11自动换111要自动换行34744文本不11自动换aaGGGAAknknj自动换"
    var lineW = 120;//单行文字行宽
    var lineH = 24;//单行文字行高
    var x = 0;
    var y = 0;
    var splitIndex = 1;
    var lineIndex = 0;
    while (text != '') { 
        while ((splitIndex <= text.length) && (ctx.measureText(text.substr(0, splitIndex)).width < lineW)) { 
            splitIndex++;
        }
        //最后一行 不用换行
        if (splitIndex - 1 == text.length) { 
            ctx.fillText(text, x, y + lineIndex * lineH);
            text = ''
        } else { 
            //非最后一行
            ctx.fillText(text.substr(0, splitIndex - 1), x, y + lineIndex * lineH);
            text = text.slice(splitIndex - 1)
        }
        lineIndex++;
        splitIndex = 1;
    }

![在这里插入图片描述][2020031415364989.png]

#### 在固定宽高容器内绘制文本 ####

> textAlign，文本的对齐方式的属性。该对齐是基于fillText方法的x的值。所以如果textAlign=“center”，那么该文本将画在 x-50%\*width。

*  左对齐

//绘制矩形边框
    ctx.rect(1,1,200,100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //绘制文本
    ctx.textAlign = "left";
    ctx.fillStyle = '#000';
    ctx.font = "14px serif";
    ctx.textBaseline = "top";
    ctx.fillText("wan shao bo", 0, 0);

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

*  右对齐

//绘制矩形边框
    ctx.rect(1,1,200,100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //绘制文本
    ctx.textAlign = "right";
    ctx.fillStyle = '#000';
    ctx.font = "14px serif";
    ctx.textBaseline = "top";
    ctx.fillText("wan shao bo", 200, 0);

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

*  水平居中

//绘制矩形边框
    ctx.rect(1,1,200,100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //绘制文本
    ctx.textAlign = "center";
    ctx.fillStyle = '#000';
    ctx.font = "14px serif";
    ctx.textBaseline = "top";
    ctx.fillText("wan shao bo", 100, 0);

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

*  在水平方向基于x轴某点中心对称

> 基于x轴50px中心对齐

//绘制矩形边框
    ctx.rect(1,1,200,100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //x轴50px水平对齐线
    ctx.moveTo(50,0);
    ctx.fillStyle = '#000';
    ctx.lineTo(50,100);
    ctx.stroke();
    //绘制文本
    ctx.textAlign = "center";
    ctx.fillStyle = '#000';
    ctx.font = "14px serif";
    ctx.textBaseline = "top";
    ctx.fillText("wan", 50, 0);
    ctx.fillText("wan shao", 50, 20);
    ctx.fillText("wan shao bo", 50, 40);

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

*  单行文本垂直居中

//绘制矩形边框
    ctx.rect(1,1,200,100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //绘制文本
    ctx.textAlign = "left";
    ctx.fillStyle = '#000';
    ctx.font = "20px serif";
    ctx.textBaseline = "middle";
    ctx.fillText("wan shao bo", 0, 50);

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

*  单行文本水平垂直居中

//绘制矩形边框
    ctx.rect(1,1,200,100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //绘制文本
    ctx.textAlign = "center";
    ctx.fillStyle = '#000';
    ctx.font = "20px serif";
    ctx.textBaseline = "middle";
    ctx.fillText("wan shao bo", 100, 50);

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

*  单行右下角对齐

//绘制矩形边框
    ctx.rect(1,1,200,100);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    //绘制文本
    ctx.textAlign = "right";
    ctx.fillStyle = '#000';
    ctx.font = "20px serif";
    ctx.textBaseline = "bottom";
    ctx.fillText("wan shao bo", 200, 100);

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

#### 参考资料 ####

*  [CanvasRenderingContext2D - Web API 接口参考 | MDN][CanvasRenderingContext2D - Web API _ _ MDN]

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[20200314150133528.png]: /images/20230529/1b551fc62268410dbc274b59918146b1.png
[20200314150617543.png]: /images/20230529/bdfc2766c4b94b74a6970ebfc573c051.png
[20200314172232385.png]: /images/20230529/11c0055a44e04cb596dc2261cc5bb391.png
[2020031415364989.png]: /images/20230529/23ecbc2b062e46bd80f7612310a9d171.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]: /images/20230529/232a81505cdc47d98ad7c60acd734594.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 1]: /images/20230529/b9f95604b997492e8d08cea383147092.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 2]: /images/20230529/374ff0966bd1474a8c3d81d2fe1de37d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 3]: /images/20230529/4c4d2859bf7e439db5e266a286375138.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 4]: /images/20230529/97c5b782911a49d9b7f717f8f0787de5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 5]: /images/20230529/c60879bd458541d595dd3c942617b981.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70 6]: /images/20230529/43e212c0986f427eadb8277ff5d76556.png
[CanvasRenderingContext2D - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460