文本屬性和方法
font 設置或返回文本內容的當前字體屬性
textAlign 設置或返回文本內容的當前對齊方式
start 默認。文本在指定的位置開始。
end 文本在指定的位置結束。
center 文本的中心被放置在指定的位置。
left 文本左對齊。
right 文本右對齊。
textBaseline 設置或返回在繪制文本時使用的當前文本基線
alphabetic 默認。文本基線是普通的字母基線。
top 文本基線是 em 方框的頂端。。
hanging 文本基線是懸掛基線。
middle 文本基線是 em 方框的正中。
ideographic 文本基線是表意基線。
bottom 文本基線是 em 方框的底端。
fillText(text,x,y,maxWidth) 在畫布上繪制“被填充的”文本
text 規定在畫布上輸出的文本。
x 開始繪制文本的 x 坐標位置(相對於畫布)。
y 開始繪制文本的 y 坐標位置(相對於畫布)。
maxWidth 可選。允許的最大文本寬度,以像素計。
strokeText(text,x,y,maxWidth) 在畫布上繪制文本(無填充)
text 規定在畫布上輸出的文本。
x 開始繪制文本的 x 坐標位置(相對於畫布)。
y 開始繪制文本的 y 坐標位置(相對於畫布)。
maxWidth 可選。允許的最大文本寬度,以像素計。
measureText() 返回包含指定文本寬度的對象
context.measureText(text).width; text 要測量的文本。
<canvas id="e" width="500" height="450" style="border:1px solid #000"></canvas> <script type="text/javascript"> var a=document.getElementById("e"); var ctx=a.getContext("2d"); ctx.font="40px 宋體"; //設置或返回文本內容的當前字體屬性 ctx.textAlign="center"; //設置或返回文本內容的當前對齊方式 ctx.textBaseline="middle"; //設置或返回在繪制文本時使用的當前文本基線 var grd=ctx.createLinearGradient(50,50,150,50); grd.addColorStop(0,"red"); grd.addColorStop(0.3,"blue"); grd.addColorStop(0.5,"green"); grd.addColorStop(0.7,"yellow"); grd.addColorStop(1,"black"); ctx.fillStyle=grd; ctx.fillText("MINSONG",100,50); //在畫布上繪制“被填充的”文本 ctx.font="60px 宋體"; ctx.textAlign="center"; ctx.textBaseline="middle"; var grd=ctx.createLinearGradient(100,50,350,50); grd.addColorStop(0,"red"); grd.addColorStop(0.3,"blue"); grd.addColorStop(0.5,"green"); grd.addColorStop(0.7,"yellow"); grd.addColorStop(1,"black"); ctx.strokeStyle=grd; var txt="ZHANGSHENG"; ctx.fillText("width:"+ctx.measureText(txt).width,180,300); //返回包含指定文本寬度的對象 ctx.strokeText(txt,200,150); //在畫布上繪制文本(無填充) </script>