HTML5 Canvas繪圖之文字的渲染
文字渲染基礎
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(傾斜字型)
通常情況,在網頁中看不出italic和oblique的區別,oblique是簡單的將字型傾斜。如果設計一套字型的時候有專門給它設定italic,那麼可能和oblique不一樣
font-variant
- 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
最新的w3c標準,九個等級:
100,200,300,400(normal),500,600,700(bold),800,900
文字的對齊
水平對齊
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)
}