HTML5 canvas文本屬性與方法


文本屬性和方法
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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM