Canvas 绘制文本 fillText - Canvas 基础教程

前面几章节中我们学习了如何绘制图形，如果要在 Canvas 中绘制文本，可以使用 fillText() 方法

我们先来看看 fillText() 绘制出来的文本是什么样的?

Canvas fillText()

fillText() 在 (x, y) 位置填充文本 text。如果选项的第四个参数提供了最大宽度，文本会进行缩放以适应最大宽度

语法

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

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

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

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

范例

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

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

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

运行结果如下

改变字体颜色

我们可以使用 fillStyle 设置全局填充颜色，当然了，这个肯定也会影响到文本的颜色

下面的代码绘制了一个绿色的文本

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

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillText("简单教程，简单编程",20,20);
ctx.fillText("https://www.twle.cn",50,50);
</script>

运行结果如下

大家有没有看到字有点糊了，看不太清楚，没关系，下一张章节我们会将如何修复