Canvas 04

绘制文字

fillText(text, x, y [, maxWidth]) strokeText(text, x, y [, maxWidth])

填充文本示例

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

文本边框示例

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

有样式的文本

font = value textAlign = value 文本对齐 start, end, left, right，center textBaseline = value 基线对齐 top, hanging, middle, alphabetic（）, ideographic, bottom direction = value ltr rtl inherit（）

textBaseLine例子 ctx.font = “48px serif”; ctx.textBaseline = “hanging”; ctx.strokeText(“Hello world”, 0, 100);

获取文本元素的属性信息

measureText() ——返回一个TextMetrics对象，包含元素所在像素及其其他相关的文本信息。

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

写在最后

未完待续… 希望大家好好生活，健康快乐。