Text 文本

To draw text on the canvas, use the drawText() method.
要在画布上绘制文本的话，要使用drawText()方法。
The resulting text on the canvas is determined by the value of the text property, as well as any of the following font properties:
画布上的最终文本，取决于text属性的值，还有下边的任意字体属性。

• fontStyle 字体样式
• fontSize 字号
• fontFamily 字体类型

$('canvas').drawText({
  fillStyle: '#9cf',
  strokeStyle: '#25a',
  strokeWidth: 2,
  x: 150, y: 100,
  fontSize: 48,
  fontFamily: 'Verdana, sans-serif',
  text: 'Hello'
});

Font Sizes 字号

The value for the fontSize property accepts two different types of values. If you specify the value as a plain number (e.g. 48), the font size is interpreted in pixels. However, you can also specify the number as a string with additional units attached (e.g. '36pt'). Examples of both use cases can be found throughout this section.
fontSize属性的值，接收两种不同类型的值。如果你指定这个值为一个普通的数字（例如48），那么字号就被理解成像素值。但你也可以指定它为一个由数字加单位组成的字符串（例如36pt）。两个用法例子都可在本部分中找到。

Transforming text 文本变形

Just like other shapes, the drawText() method respects the value of the fromCenter and transformation properties such as rotate.
就像其它形状一样，drawText()方法接收fromCenter值和诸如rotate在内的转换属性。

$('canvas').drawText({
  fillStyle: '#cfc',
  strokeStyle: '#000',
  strokeWidth: 2,
  x: 150, y: 100,
  fontSize: '50pt',
  fontFamily: 'Arial',
  text: 'Hello',
  // Measure (x, y) from the text's top-left corner 从文本的左上角量(x,y)
  fromCenter: false,
  // Rotate the text by 30 degrees 将文本旋转30度
  rotate: 30
});

Scaling text 缩放文本

You can animate the font size of text using the scale, scaleX, or scaleY properties.
你可以使用scale，scaleX，scaleY属性，动态化字号。

$('canvas').drawText({
  layer: true,
  fillStyle: '#9cf',
  strokeStyle: '#25a',
  strokeWidth: 2,
  x: 200, y: 100,
  fontSize: '36pt',
  fontFamily: 'Verdana, sans-serif',
  text: 'Hello',
  scale: 2,
  click: function() {
    // Click the text to make it grow 点击文本后它会长大
    $(this).animateLayer(0, {
      scale: '+=0.25',
    }, 250);
  }
});

Measuring text 测量文本

The measureText() method returns an object containing the text's calculated width and height (as well as of its other properties).
measureText()方法返回一个对象，它包含了文本计算出来的宽高（还有其它属性）。
The method accepts a layer identifier (either the layer's index, or its name). The method also accepts an object of properties (the same properties you use when calling the drawText() method) as the only argument.
本方法接收一个层标识（要么是层索引，要么是它的名字）。本方法也接收一个属性对象（跟你调用drawText()方法时使用的属性一样）作为唯一参数。
In the example below, the circle is only as wide as the text inside of it.
在下边的例子中，圆只跟它内部的文本一样宽。

// Draw text 绘制文本
$('canvas').drawText({
  layer: true,
  name: 'myText',
  fillStyle: '#36c',
  strokeWidth: 2,
  x: 180, y: 150,
  fontSize: '36pt',
  fontFamily: 'Verdana, sans-serif',
  text: 'Hello'
})
// Draw circle as wide as the text 画圆，与文本一样宽
.drawArc({
  layer: true,
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 180, y: 150,
  radius: $('canvas').measureText('myText').width / 2
});

Wrapping text 包裹文本（应该是文本换行）

You can also define a maximum line width for the text using the maxWidth property. In doing so, each line of text will never be longer than the maximum width (this is known as text 'wrapping').
你也可以使用maxWidth属性定义文本的最大行宽。这样做了的话，文本的每行就不会比最大宽度大了（就如同所知的文本“包裹”一样）。
Manually adding a line break can be done so by adding the standard newline character in your string (\n).
手动添加换行也可以，就在你的文本加标准换行符\n就行了。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 100,
  maxWidth: 300
});

Aligning text 文本对齐

If you wish to align your text to the left or right (rather than the center by default), use the align property.
如果你想要把你的文本左对齐或右对齐（而不是默认的居中对齐），就要使用align属性。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 100,
  align: 'left',
  maxWidth: 300
});

Aligning text to a margin 将文本对齐到边缘

With the above align property, the text will, by default, appear to align the text to either the left or right, but will still be centered relative to its x and y coordinates.
使用上边的align属性，文本默认会显示成靠左或靠右对齐，但仍然会以它的x y属性居中。
The respectAlign property will ensure that the text's (x, y) coordinates are in line with either the left or right margin (depending of the value of the align property). Therefore, enabling this property will require you to adjust your x position accordingly.
respectAlign属性会确保，文本的xy坐标与其左或右边缘保持一致（取决于align属性的值）。因此启用这个属性，规定你依此调整你的x坐标。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 80, y: 100,
  align: 'left',
  respectAlign: true,
  maxWidth: 300
});

Changing line height 改变行高

The lineHeight property will change the line height of your text. The value of this property is a multiple of the default line height (which is 1).
lineHeight属性会改变你文本的行高。本属性的值是默认行高的倍数（默认为1）。
For example, the demo below will double the line height of the text it draws.
例如，下边的例子中将绘制的文本的行高加倍。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 100,
  align: 'left',
  maxWidth: 300,
  lineHeight: 2
});

A line height with a negative value will swap any lines of text (e.g.the top line becomes the bottom line).
一个负值的行高，会交换文本的任意行（例如顶上的行变成了底下的行）。

$('canvas').drawText({
  fillStyle: '#36c',
  fontStyle: 'bold',
  fontSize: '20pt',
  fontFamily: 'Trebuchet MS, sans-serif',
  text: 'The quick brown fox jumps over the lazy dog.',
  x: 180, y: 100,
  align: 'left',
  maxWidth: 300,
  lineHeight: -2
});

Note that a negative line height will produce a negative number when retrieving the height of the text (using the measureText() method).
注意，负值的行高会在你（使用measureText()方法）访问文本高度时产生一个负数。

Text along an arc 沿圆弧（排列）的文本

jCanvas can also draw arc text (that is, text along an arc). Doing so only requires specifying one extra property: the radius property.
jCanvas也可以绘制弧形的文本（也就是让文本沿圆弧排列）。这么做只需要指定一个额外的属性：radius属性。

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150
});

For arc text only, there exists an optional letterSpacing which controls the spacing between characters along the arc.
仅针对弧型文本，才存在一个可选的letterSpacing属性，它控制着圆弧上字之间的空隙。

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150,
  letterSpacing: 0.02
});

Technically speaking, the value of the letterSpacing property represents a multiple of pi, which in turn represents the angular distance between each letter. For example, a value of 0.05 implies that each character is 9 degrees apart (0.05π is equivalent to 9°)
从技术上来说，letterSpacing属性的值代表的是pi的倍数，相应代表了每个字母之间的角度距离，例如，值0.05意味着每个字符之间分离9度（0.05π 等于 9°）。

Flipping arc text 翻转弧线文本

Sometimes, you may wish to orient the text such that it curves upward (like a smile). Normally, attempting to do so will yield undesirable flipped text.
有时，你或许想要调整文本，让它弧线向上（像个笑容一样）。通常有人会（像下边这样）这么做，但会产生出非预期之内（形状的）翻转文本。

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150,
  rotate: 180
});

However, you can set the flipArcText property to true and the text will be flipped to be readable again.
但，你可以设置flipArcText属性为true，来使文本在翻转之后，仍然可读。

$('canvas').drawText({
  fillStyle: '#c33',
  fontFamily: 'Ubuntu, sans-serif',
  fontSize: 18,
  text: 'THIS IS THE FIRST LINE\nTHIS IS THE SECOND LINE\nTHIS IS THE THIRD LINE',
  x: 160, y: 200,
  radius: 150,
  rotate: 180,
  flipArcText: true
});