繪制文字text

繪制語句

• 設置文本字號字體 context.font = “Npx 字體”;
  默認為10px
• 描邊文字（空心） contenxt.strokeText(“文本”, x, y);
• 描邊文字（實心） contenxt.fillText(“文本”, x, y);

設置文本對齊方式

1. 文字的水平對齊context.textAlign=”left/ right/ center”;
   -默認樣式為left
   -除此以外還有start、end
2. 文字的垂直對齊 context.textBaseline =”top/ bottom/ middle”
   -默認為基線對齊alphabetic
   -除此以外還有hanging、ideographic
   
   水平對齊方式+垂直對齊方式
   
   
   

文本寬度計算方法 var result= measureText(“文本”);

result為一個對象，計算出的寬度值=result.width;

設置文本方向 context.direction = “inherit/ ltr/ rtl”

-默認樣式為inherit

案例：九宮格文字

最終呈現：

文字九宮格.png

<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.moveTo(0,200);     //四根宮格線
    context.lineTo(600,200);
    context.moveTo(0,400);
    context.lineTo(600,400);
    context.moveTo(200,0);
    context.lineTo(200,600);
    context.moveTo(400,0);
    context.lineTo(400,600);
    context.stroke();
    context.font="20px 微軟雅黑";
    //左上
    context.textAlign = "left";
    context.textBaseline = "top";
    context.fillText("leftTop",0,0);
    //左下
    context.textBaseline = "bottom";
    context.fillText("leftBottom",0,600);
    //左中
    context.textBaseline = "middle";
    context.fillText("leftMiddle",0,300);
    //右上
    context.textAlign = "right";
    context.textBaseline = "top";
    context.fillText("rightTop",600,0);
    //右下
    context.textBaseline = "bottom";
    context.fillText("rightBottom",600,600);
    //右中
    context.textBaseline = "middle";
    context.fillText("rightmiddle",600,300);
    //中上
    context.textAlign = "center";
    context.textBaseline = "top";
    context.fillText("centerTop",300,0);
    //中下
    context.textBaseline = "bottom";
    context.fillText("centerBottom",300,600);
    //中中
    context.textBaseline = "middle";
    context.fillText("centerMiddle",300,300);
</script>