21-在Text Arranger中处理渐变和图案

Fill Type: <select id="fillType">
　<option value="colorFill">Color Fill</option>
　<option value="linearGradient">Linear Gradient</option>
　<option value="radialGradient">Radial Gradient</option>
　<option value="pattern">pattern</option>
　</select>

添加第二颜色选择，用于渐变填充。这将用到jsColor拾色器和textColorFill2变量id。

Text Color 2: <input class="color" id="textFillColor2" value ="000000"/>
　<br>

返回canvasApp()函数，为两个新的表单元素创建事件监听器。

formElement = document.getElementById("textFillColor2");
formElement.addEventListener('change', textFillColor2Changed, false);
formElement = document.getElementById("fillType");
formElement.addEventListener('change', fillTypeChanged, false);

同时，还需要为新的表单元素创建关联的事件处理器函数。

function textFillColor2Changed(e) {
　　　var target = e.target;
　　　textFillColor2 = "#" + target.value;
　　　drawScreen();
　 }
　 function fillTypeChanged(e) {
　　　var target = e.target;
　　　fillType = target.value;
　　　drawScreen();
　 }

接下来，为新功能添加drawScreen()支持。首先，使用环境下的measureText() 方法获得文本宽度，创建渐变。

var metrics = context.measureText(message);
var textWidth = metrics.width;

然后，决定如何为环境中的fillStyle和strokeStyle格式化“颜色”。在这个实例中，它可以是CSS颜色、渐变或图像图案。

• 颜色填充：如果实现一个简单的颜色填充，操作方法和低版本的Text Arranger一样。所做的只是将textFillColor的值赋给tempColor。
• 线性渐变：线性渐变需要确定沿哪条线创建渐变。这条线将从文本起始位置（xPosition-textWidth/2，因为文本使用center对齐）水平渐变至文本结尾（textWidth）。同时，添加两个颜色断点（0和60%），颜色分别是textFillColor1和text FillColor2。
• 径向渐变：从文本中心（xPosition,yPosition）开始，以字体大小为半径（fontSize）创建一个圆锥。这个圆锥将以半径为1水平扩展至文本宽度（textWidth）。
• 图案：这个选项将创建一个使用image变量的图案，并设置其repeat的值，在水平和垂直方向铺设。

具体代码如下。

var tempColor;
if (fillType == "colorFill") {
　 tempColor = textFillColor;
} else if (fillType == "linearGradient") {
　 var gradient = context.createLinearGradient(xPositiontextWidth/
　　　 2, yPosition, textWidth, yPosition);
　 gradient.addColorStop(0,textFillColor);
　 gradient.addColorStop(.6,textFillColor2);
　 tempColor = gradient;
} else if (fillType == "radialGradient") {
　 var gradient = context.createRadialGradient(xPosition, yPosition,
　　　 fontSize, xPosition+textWidth, yPosition, 1);
　 gradient.addColorStop(0,textFillColor);
　 gradient.addColorStop(.6,textFillColor2);
　 tempColor = gradient;
} else if (fillType == "pattern") {
　var tempColor = context.createPattern(pattern,"repeat");
} else {
　 tempColor = textFillColor;
}

最后，设置fillStyle或strokeStyle，用tempColor代替textFillColor。设置文本填充的选项将显示在画布上，如图3-10所示。

context.fillStyle = tempColor;