Html5 Canvas学习之路（四）

Html5 Canvas 的文本API

1. 显示基本文本

要在画布上显示文本，最简单的定义方式是通过使用CSS字体样式属性的标准值设置context.font的样式:font-style,font-weight,font-siza,font-face。

Html5 Canvas上下文对象包含一个有用的方法 measureText()。当提供一个文本串时，它将在 TextMetrics 对象的表单中基于当前上下文的设置返回一些关于该文本的属性。现在 TextMetrics对象只有一个属性： width。TextMetrics对象的 Width属性给定了在画布上渲染时文本确切的像素宽度。它对文本居中非常有用。

可以用measureText()方法计算出文本的居中位置：

function textPos(message) {
        var metrics = context.measureText(message);
        var textWidth = metrics.Width;
        var xPosition = (theCanvas.width/2) - (textWidth/2);
        var yPosition = (theCanvas.height/2);
        return {x:xPosition ,y:yPosition};
        }

有两种方法在画布上渲染文本分别是：

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

text是指在画布上渲染的文本，x和y分别对应了文本在画布上的坐标，maxWidth是指在画布上渲染的最大宽度。

2. 设置文本字体

在Canvas中设置字体，只需要通过把CSS兼容的字符串应用到context.font属性，即可设置字体的大小、磅重、样式以及字体外观。基本格式如下：

• [font style] [font weight] [font size] [font face]

例如： context.font = "italic bold 24px serif"。

可以设置合理的属性并将其拼接起来：
context.font = fontWeight + ' ' + fontStyle + ' ' + fontSize + 'px ' + fontFace

可以用新的HTML5 range表单控件来为字体指定大小。range是一种<input>类型，可以在HTML页面上创建一个滑块来限制字数输入的范围，它有四种属性，min是范围最小值、max是范围最大值、step是范围滑块移动的步长单元数、value是默认范围值。

若想要给文本设置颜色，只需给context.fillStyle或context.strokeStyle属性设置一个有效的CSS RGB 颜色。（补充：另外可以用jsColor来处理字体颜色。）

在Canvas中，对其字体有两个选项，及垂直和水平。这些对其是参照Canvas本身作用于文本的，而且它围绕在文字最顶、最低、最右、最左四边的看不见的边框，有如下两个属性用于垂直和水平对齐：

• context.textBaseline
• context.textAlign

3. 透明度、阴影、渐变

可以利用Canvas上下文的globalAlpha属性设置对象的透明度。还可以设置Canvas上下文对象的阴影属性来设置阴影。

1)线性渐变：

可以调用上下文 createLinearGradient()方法来创建渐变参考线。

• var gradient = context.creatLinearGradient([x0],[y0],[x1],[y1]);

x0和y0是参考线的起点，x1和y1是参考线的终点坐标。

创建了渐变参考线之后，还需添加产生渐变层次的颜色，这需要以下函数实现：

• addColorStop([offset],[color])

这个函数有两个参数。offset这是渐变参考线开始颜色层次的位移，整个渐变由0.0到1.0的十进制代表的百分数值来定义。color。代表“#RRGGBB”格式有效的CSS颜色。

2）径向渐变：

径向渐变与线性渐变类似，只不过它是一个圆锥形，而不是一条直线。这个圆锥由中心点和两个圆的半径定义而成通过调用Canvas上下文的createRadialGradient()函数来实现。

4. 最后

先来一个Canvas对象的使用方法：

function createImageDataPressed(e) {
         var imageDataDisplay = document.getElementById('imageDataDisplay');
         imageDataDisplay.value = theCanvas.toDataURL();
         window.open(imageDataDisplay.value,"canvasImage","left=0,top=0,width="
         + theCanvas.width + ",height="+theCanvas.height +
         ",too;bar=0,resizable=0");
     }

然后再用上述知识点实现一个Text Arranger: