文字渲染基礎

context.font=”bold 40px Arial”
font屬性可以接受css的font屬性

context.fillText(string,x,y,[maxlen])
string指定位置，(x,y)指定位置
context的fillestyle屬性設定字型屬性
maxlen可選，表示繪製這段文字最長的寬度

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var
 
 context=canvas.getContext('2d');
    context.font="bold 20px Arial"
    context.fillStyle="#058"
    context.fillText("Hello canvas！",40,100)
}

context.strokeText(string,x,y,[maxlen])
string指定位置，(x,y)指定位置
context的strokeStyle屬性適用字型
maxlen可選，表示繪製這段文字最長的寬度

window.onload=function(){
    var canvas
 
=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');
    context.font="bold 20px Arial"
    context.lineWidth=1
    context.stroke="#058"
    context.strokeText("Hello canvas！",500,100)
}

context.strokeText("Hello canvas！",500,100,100)
//設定maxlen，可以強行壓縮文字
 

當然也可以加其他的效果：漸變，背景填充等
可以fillText()和strokeText()同時使用

文字渲染進階

字型、字號、字型

font

預設值“ 20px sans-serif”

context.font=
font-style font-variant font-weight font-size font-family

font-style：

• normal（defualt）
• italic（斜體字）
• oblique（傾斜字型）

• normal
• small-caps 只有在使用英文小寫字母時才能看出差別

看一下區別

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');
    context.fillStyle="#058"
    context.font="bold 20px Arial"
    context.fillText("Hello canvas！",500,100)

    context.font="small-caps bold 20px Arial"
    context.fillText("Hello canvas！",500,300)
}

有small-caps屬性的字母都變成大寫
font-weight

• lighter
  
• normal
  
• bold
  
• bolder
  

文字的對齊

水平對齊
context.textAlign=left , center , right

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');
    context.fillStyle="#058"
    context.font="bold 20px Arial"
    context.textAlign="left"
    context.fillText("Hello canvas！",500,200)

    context.textAlign="center"
    context.fillText("Hello canvas！",500,300)

    context.textAlign="right"
    context.fillText("Hello canvas！",500,400)
       //輔助線
    context.strokeStyle="#888"
    context.moveTo(500,0)
    context.lineTo(500,500)
    context.stroke()
}

垂直對齊
context.textBaseline=top middle bottom alphabetic(Defualt) (基於拉丁語) ideographic（基於漢字） hanging（基於印度語）

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');
    context.fillStyle="#058"
    context.font="bold 20px Arial"
    context.textAlign="left"
    context.fillText("Hello canvas！",500,200)

    context.textAlign="center"
    context.fillText("Hello canvas！",500,300)

    context.textAlign="right"
    context.fillText("Hello canvas！",500,400)

    context.strokeStyle="#888"
    context.moveTo(500,0)
    context.lineTo(500,500)
    context.stroke()
}

這樣也能理解filltext()的(x,y)

alphabetic(Defualt) (基於拉丁語) ideographic（基於漢字） hanging（基於印度語） 測試

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');
    context.fillStyle="#058"
    context.font="bold 20px Arial"
    context.textBaseline="alphabetic"
    context.fillText("中英文測試Hello canvas！",500,200)

    context.strokeStyle="#888"
    context.moveTo(0,200)
    context.lineTo(800,200)
    context.stroke()

    context.textBaseline="ideographic"
    context.fillText("中英文測試Hello canvas！",500,300)
    context.strokeStyle="#888"
    context.moveTo(0,300)
    context.lineTo(800,300)
    context.stroke()

    context.textBaseline="hanging"
    context.fillText("中英文測試Hello canvas！",500,400)
    context.strokeStyle="#888"
    context.moveTo(0,400)
    context.lineTo(800,400)
    context.stroke()
}

文字的度量

context.measureText(string).width
傳入引數：字串
返回的值：字串的寬度

window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getContext('2d');
    context.fillStyle="#058"
    context.font="bold 20px Arial"
    context.fillText("Hello canvas！",500,100)

    var textWidth=context.measureText("Hello canvas").width
    context.fillText("以上字元寬度為"+textWidth+"px",500,300)

}