HTML5 Canvas 开发绘图方法整理【五、canvas text / 文本、文字相关】

梦里梦外; 2022-05-31 09:05 440阅读 0赞

关于 Canvas文本的方法和属性如下 ：  
![这里写图片描述][70]

另外再加上 fillStyle() 与 strokeStyle();

一般情况下都是 fillStyle() 与 fillText() | 或 | strokeStyle() 与 strokeText() 配合着使用;

--------------------

1、描边文字  
ctx.strokeText(“要显示的文本”,x , y ,最大宽度);  
最大宽度为可选参数，表示要显示的文字最大不能超过多少像素

2、填充文字  
ctx.fillText();

3、获取文本长度  
ctx.measureText();

//描边文字
            let text="要显示的字符串文本：随便写点"; 
            ctx.font="bold 30px KaiTi"; //font 属性使用的语法与 CSS font 属性相同。
            ctx.strokeStyle="#FF7C00";
    
    
    
     //填充文字
            ctx.fillStyle="#0AD3FA";
            ctx.fillText(text,200,80);
    
    
    
    //获取文本长度
            console.log(ctx.measureText(text).width);//查看文本长度
    
            //利用measureText() 让文本水平居中
            let tw=ctx.measureText(text).width,
                cw=cans.width;
            let textX = cw/2 -   tw/2;
    
            ctx.fillStyle="#BC41F1";
            ctx.fillText(text,textX,150);

效果图：  
![这里写图片描述][70 1]

还有定义文本的三个属性： font 、textAlign、textBaseline  
font同CSS 属性一样的用法 本身属性其实挺多的，不过日常我们使用的大概也就那么两三个：

例如：  
ctx.font=”bold 30px KaiTi”;

textAlign 和 textBaseline 用的不多，可以点下面链接,了解一下即可;

[http://www.w3school.com.cn/tags/canvas\_textalign.asp][http_www.w3school.com.cn_tags_canvas_textalign.asp]

[http://www.w3school.com.cn/tags/canvas\_textbaseline.asp][http_www.w3school.com.cn_tags_canvas_textbaseline.asp]

[70]: /images/20220531/50aeeac2f185473e9e9f817be120c59a.png
[70 1]: /images/20220531/bf2a1b6ec1084c9798cbf58d87f2a29f.png
[http_www.w3school.com.cn_tags_canvas_textalign.asp]: http://www.w3school.com.cn/tags/canvas_textalign.asp
[http_www.w3school.com.cn_tags_canvas_textbaseline.asp]: http://www.w3school.com.cn/tags/canvas_textbaseline.asp