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);

직접 시도해 보세요

다른 참조:

CodeW3C.com의 완전한 Canvas 참조 매뉴얼