Canvas 绘制文本骨架 strokeText() - Canvas 基础教程

什么叫做绘制文本骨架呢？看下面这张图

只是把文本的边框描了出来，并没有填充文本的内部

Canvas 提供了 strokeText() 用于绘制文本的骨架

Canvas strokeText()

strokeText() 用于在给定的 (x, y) 位置绘制文本的方法

如果传递了表示最大值的第四个参数，文本将会缩放适应宽度

语法

void ctx.strokeText(text, x, y [, maxWidth]);

参数	说明
text	要绘制的文本
x	文本起始点的 x 轴坐标
y	文本起始点的 y 轴坐标
maxWidth	可选，需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体或者小号的字体

例如要在 (10,10) 位置绘制文本 简单教程,简单编程，可以如下使用

ctx.strokeText('简单教程,简单编程',10,10,);

范例

我们先来看看一般的使用方法，在 (10,10) 位置绘制文本 简单教程,简单编程

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.strokeText("简单教程，简单编程",20,20);
</script>

运行结果如下

哎呀，看起来有点糊了，为什么呢？

大家应该都知道，strokeXXX() 方法用来绘制边框的，如果字体比较小，那么边框就会粘在一起，所以就这样了

我们把字体调大一点，比如设置为 44px Microsoft YaHei ，看看效果

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="500" height="200">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.font = "44px Microsoft YaHei";
ctx.strokeText("简单教程，简单编程",50,50);
</script>

运行结果如下