canvas(四) 绘制文字

绘制文本

---

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

    }
}