Html5 Canvas学习之路（四）

不念不忘少年蓝@ 2021-09-18 15:22 562阅读 0赞

## 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上下文的*globalAlph*a属性设置对象的透明度。还可以设置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:

![clipboard.png][]

[clipboard.png]: /images/20210726/c8ba131ff7fd43e2b2c4984742be0527.png