繪制文字text
繪制語句
- 設置文本字號字體 context.font = “Npx 字體”;
默認為10px - 描邊文字（空心） contenxt.strokeText(“文本”, x, y);
- 描邊文字（實心） contenxt.fillText(“文本”, x, y);
設置文本對齊方式
- 文字的水平對齊context.textAlign=”left/ right/ center”;
-默認樣式為left
-除此以外還有start鳞陨、end - 文字的垂直對齊 context.textBaseline =”top/ bottom/ middle”
-默認為基線對齊alphabetic
-除此以外還有hanging、ideographic
水平對齊方式+垂直對齊方式
文本寬度計算方法 var result= measureText(“文本”);
result為一個對象瞻惋，計算出的寬度值=result.width;
設置文本方向 context.direction = “inherit/ ltr/ rtl”
-默認樣式為inherit
案例：九宮格文字
最終呈現(xiàn)：
文字九宮格.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>
