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 參考手冊