繪圖文字

繪製到畫布不僅限於形狀和影象。你還可以在畫布上繪製文字。

要在畫布上繪製文字，請獲取對畫布的引用，然後在上下文中呼叫 fillText 方法。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillText("My text", 0, 0);

傳遞給 fillText 的三個必需引數是：

1. 你要顯示的文字
2. 水平（x 軸）位置
3. 垂直（y 軸）位置

此外，還有第四個可選引數，可用於指定文字的最大寬度（以畫素為單位）。在下面的示例中，200 的值將文字的最大寬度限制為 200px：

ctx.fillText("My text", 0, 0, 200);

結果：

你也可以使用 strokeText 方法繪製沒有填充的文字，而只是繪製輪廓：

ctx.strokeText("My text", 0, 0);

結果：

如果沒有應用任何字型格式化屬性，畫布預設情況下在 sans-serif 中以 10px 呈現文字，這使得很難看到 fillText 和 strokeText 方法的結果之間的差異。有關如何增加文字大小和對文字應用其他美學更改的詳細資訊，請參閱格式化文字示例 。