canvas 文本

Canvas文本的书写

canvas font

font 属性设置或返回画布上文本内容的当前字体属性

语法：context.font="italic small-caps bold 12px arial";

属性值如下：

canvas textAlign

textAlign属性根据锚点，设置或返回文本内容的当前对齐方式。

语法：context.textAlign="center|end|left|right|start";

属性值：

canvas textBaseline

textBaseline 属性 设置或返回在绘制文本时的当前文本基线。

语法：context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

属性值说明：

canvas fillText

 fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

语法：context.fillText(text,x,y,maxWidth);

参数说明：

text::规定在画布上输出的文本

x:开始绘制文本的 x 坐标位置（相对于画布）。

y:开始绘制文本的 y 坐标位置（相对于画布）。

maxWidth:可选。允许的最大文本宽度，以像素计。

canvas strokeText

strokeText() 方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

语法：context.strokeText(text,x,y,maxWidth);

参数说明同上面的fillText

canvas meatureText

measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度。

语法：context.measureText(text).width;

示例代码如下：

 var canvas = document.getElementById("canvas");            var context = canvas.getContext("2d");            context.font = "20px Arial";            context.fillText("Hello World", 0, 30);            context.strokeStyle = "blue";            context.moveTo(200, 0);            context.lineTo(200, 150);            context.stroke();            context.textAlign = "start";            context.fillText("textAlign=start", 200, 30);            context.textAlign = "center";            context.fillText("textAlign=center", 200, 60);            context.textAlign = "end";            context.fillText("textAlign=end", 200, 90);            context.textAlign = "left";            context.fillText("textAlign=left", 200, 120);            var txt = "textAlign=right";            context.textAlign = "right";            context.fillText(txt, 200, 150);            context.fillText("width:" + context.measureText(txt).width, 600, 150);            context.moveTo(0, 200);            context.lineTo(700, 200);            context.stroke();            context.textAlign = "start";            context.textBaseline = "top";            context.fillText("Top", 10, 200);            context.textBaseline = "bottom";            context.fillText("bottom", 80, 200);            context.textBaseline = "middle";            context.fillText("middle", 160, 200);                       context.textBaseline = "hanging";            context.fillText("hanging", 260, 200);            context.textBaseline = "ideographic";            context.fillText("ideographic", 360, 200);            context.textBaseline = "alphabetic";            context.fillText("alphabetic", 560, 200);

效果数如下：