繪制文本
canvas 提供了兩種方法繪制文本：
fillText(text,x,y [,maxWidth])
在指定位置的（x,y）位置填充指定的文本，繪制的最大寬度是可選的。
strokeText(text,x,y, [,maxWidth])
在指定的位置繪制文本邊框
一個填充文本的實例
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.font = "20px Times New Roman"
ctx.fillText("Sample String", 5, 30);
}
}
填充文本
一個邊框文本的實例
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.font = "48px Times New Roman"
ctx.strokeText("Sample String", 5, 50);
}
}
邊框文本
有樣式的文本
font = value
設置文本的尺寸，默認字體是 10px sans-serif。
textAlign = value
文本對氣項，可選的值包括： start end left right center 默認值為 start。
textBaseline value
基線對齊選項。可選的值包括：top hanging middle alphabetic ideographic bottom 默認值為 alphabetic
direction = value
文本方向，可用值： ltr rtl inherit 默認值是 inherit。
文本裁量
當需要更多文本細節時，可以使用 measureText() 返回含文本特性的對象。
function draw() {
let canvas = document.getElementById('tutorial')
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.font = "48px serif"
ctx.textBseline = 'alphabetic'
ctx.strokeText("Sample String", 0, 100);
var text = ctx.measureText("Sample")
console.log(text.width) // 返回144
}
}
