3.3 繪制文字

可以使用fillText()方法和strokeText()方法來繪制文字，其中fillText()方法用來繪制填充文字，strokeText()方法用來繪制輪廓文字。

3.3.1 繪制填充文字

繪制填充文字時，fillText()方法的用法如下：

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

其中，text為要繪制的文字，x、y為繪制文字的坐標，maxWidth為可選參數，表示顯示文字時的最大寬度。如果要繪制的文字大于最大寬度，那么字體會被調整成更小的字號或者更瘦的字體。例如，filledText.html。

filledText.html：

filledText.html在瀏覽器中的顯示效果如圖3-7所示。

3.3.2 繪制輪廓文字

繪制輪廓文字時，strokeText()方法的用法如下：

     context.strokeText(text, x, y, [maxWidth]);

其中，text為要繪制的文字，x、y為繪制文字的坐標，maxWidth為可選參數，表示顯示文字時的最大寬度。例如，hollowText.html。

hollowText.html：

hollowText.html在瀏覽器中的顯示效果如圖3-8所示。