canvas(五)繪制文本

1.繪制描邊文本

ctx.strokeText(str,x0,y0)
參數一：需要繪制的文本
參數二三：文本繪制的基點（文字默認在基點的右上方）
它有自己的獨立路徑

ctx.strokeStyle：設置文本顏色
ctx.font：設置文本,語法與 CSS font 屬性相同。詳見https://www.runoob.com/cssref/pr-font-font.html

注意：即使擁有獨立路徑，依然會繼承前面代碼設置的繪制樣式，包括描邊顏色，虛線

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")

    //繪制中心線
    ctx.moveTo(0,canvas.height/2)
    ctx.lineTo(canvas.width,canvas.height/2)
    //繪制虛線
    ctx.setLineDash([5,10])
    //描邊
    ctx.stroke()
    //開啟路徑
    ctx.beginPath()
    ctx.moveTo(canvas.width/2,0)
    ctx.lineTo(canvas.width/2,canvas.height)
    //繪制虛線
    ctx.setLineDash([5,10])
    //描邊
    ctx.stroke()

    //以正中央為基點繪制文本)
    //文本顏色就是描邊的顏色
    ctx.strokeStyle = "red"
    //設置字體大小和字體類型
    ctx.font = "40px 微軟雅黑"
    //取消虛線繪制
    ctx.setLineDash([1,0])
    //繪制文本
    ctx.strokeText("你好世界",canvas.width/2,canvas.height/2)
</script>

2.修改文本對齊方式（水平方向）

文本默認在基點的右上方，也就是左對齊，可以通過相關API來修改文本對齊方式。
ctx.textAlign設置文本的對齊方式，他有以下幾個值：
left：默認，左對齊，原點位於文字的左下角
center：居中對齊，原點位於文字的中下方
right：右對齊，原點位於文字的右下角

注意：這個屬性會被后面的代碼繼承

<script>
    //其余代碼省略

    //繪制左對齊文本(默認就是這個，不設置也是這效果)
    ctx.textAlign ="left"
    ctx.strokeText("默認左對齊",canvas.width/2,canvas.height/2)

    //繪制居中對齊的文本
    ctx.textAlign = "center"
    ctx.strokeText("居中對齊",canvas.width/2,100)

    //繪制右對齊的文本
    ctx.textAlign = "right"
    ctx.strokeText("右對齊",canvas.width/2,200)
</script>

3.修改文本基線

文本之所以默認在基點的上方，就是由文本基線決定的。
通過ctx.textBaseline可以修改文本的基線，方法與css的vertical-align類似，他有以下幾個值：
middle：文本垂直方向上居中對齊
top：文本頂對齊
bottom：文本底對齊
baseline：默認

<script>
    //以上代碼省略

    //繪制底部對齊文本
    ctx.textBaseline ="bottom"
    ctx.strokeText("底對齊",0,canvas.height/2)

    //繪制垂直居中對齊的文本
    ctx.textBaseline = "middle"
    ctx.strokeText("垂直居中對齊",150,canvas.height/2)

    //繪制頂對齊的文本
    ctx.textBaseline = "top"
    ctx.strokeText("頂對齊",350,canvas.height/2)
</script>

4.繪制填充文本（實心文字）

ctx.fillText(str,x,y,maxWidth)
參數一：需要 繪制的文本
參數二三：繪制基點
參數四：可選，文本的最大寬度（如果文本的實際寬度大於這個限制，所有的文本會被壓扁）

<script>
    //以上代碼省略

    //設置填充顏色
    ctx.fillStyle = "green"
    //設置文本大小和字體
    ctx.font = "40px 微軟雅黑"

    //繪制填充文本
    ctx.fillText("填充的文本",canvas.width/2,canvas.height/2)

    //繪制填充文本（限制文本最大寬度）（寬度為畫布的1/2）
    ctx.fillText("這是有最大寬度限制的文本",0,200,canvas.width/2)
    
</script>

5.獲取文本的寬度

ctx.measureText(str)返回一個文本測量結果的對象，其中的width屬性描述的就是文本的寬度。

文本寬度與字符個數還有字體大小有關，例如：

<script>
    //以上代碼省略

    //繪制填充文本
    var cName = "人類三大本質"
    var name = "hello world"

    //設置文本大小和字體
    ctx.font = "40px 微軟雅黑"
    ctx.fillText(cName,50,50)
    ctx.fillText(name,50,100)
    //打印寬度
    console.log(ctx.measureText(cName).width)
    console.log(ctx.measureText(name).width)

    //重新設置文本大小和字體
    ctx.font = "20px 微軟雅黑"
    ctx.fillText(cName,50,150)
    ctx.fillText(name,50,200)
    //打印寬度
    console.log(ctx.measureText(cName).width)
    console.log(ctx.measureText(name).width)
    
</script>

可以看出，字體大小越大，相應的文本寬度也就越大。漢字比較有意思，他的字體大小剛好等於一個漢字的大小，6個漢字供占據 40 * 6 = 240，將字體大小修改成20px后，占位6 * 20 = 120

實例：為文本添加一條長度相等的下划線

<script>
    var canvas = document.querySelector("canvas")
    var ctx = canvas.getContext("2d")
    //設置繪制原點
    var x=80,y=150
    //設置填充顏色
    ctx.fillStyle = "green"
    //定義文本
    var cName = "人類三大本質"
    //設置文本大小和字體
    ctx.font = "40px 微軟雅黑"
    //設置底居中
    ctx.textBaseline = "bottom"
    ctx.fillText(cName,x,y)
    //獲取文本寬度
    var textWidth = ctx.measureText(cName).width
    //繪制直線
    ctx.moveTo(x,y) 
    ctx.lineTo(x+textWidth,y)
    ctx.stroke()
</script>