繪制文本

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
設(shè)置文本的尺寸，默認(rèn)字體是 10px sans-serif。

textAlign = value
文本對氣項，可選的值包括： start end left right center 默認(rèn)值為 start。

textBaseline value
基線對齊選項?？蛇x的值包括：top hanging middle alphabetic ideographic bottom 默認(rèn)值為 alphabetic

direction = value
文本方向，可用值： ltr rtl inherit 默認(rèn)值是 inherit。

文本裁量

當(dāng)需要更多文本細(xì)節(jié)時，可以使用 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

    }
}