HTML Canvas 文本

在画布上绘制文本

要在画布上绘制文本，最重要的属性和方法是：

• font - 定义文本的字体属性
• fillText(text,x,y) - 在画布上绘制“填充的”文本
• strokeText(text,x,y) - 在画布上绘制文本（无填充）

使用 fillText()

实例

将字体设置为 "30px Arial"，并在画布上写入填充的文本：

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

亲自试一试

使用 strokeText()

实例

将字体设置为 "30px Arial"，并在画布上写入文本（不填充）：

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

亲自试一试

添加颜色并居中文本

实例

将字体设置为 "30px Comic Sans MS"，并在画布中央写入填充红色的文本：

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

亲自试一试

另请参阅：

W3School 的完整 Canvas 参考手册