07-fillText和strokeText
3.1.5 fillText和strokeText
eval() 虽然本章为每个事件处理程序中类似的应用程序都创建了一个单独的函数，但实际上它们以相同的方式工作。然而，一些开发者会倾向于使用eval()函数，作为其对控制更改Text Arranger的HTML元素的事件处理程序，如下所示。 上面这段代码使用eval()创建并执行JavaScript代码。它动态地创建了HTML元素的名字，从而不必单独创建多个事件处理函数。然而，许多开发者慎重使用eval()，因为它开启了安全漏洞。不但使调试代码更难，还会在使用它时增加程序的风险。
context.fillText()函数（见图3-1）将在画布上渲染单色的文本。在context. fillColor属性中设置所用的颜色，在context.font属性中设置所用的字体。函数的调用如下：
fillText([text],[x],[y],[maxWidth]);var formElement = document.getElementById("textBox");
formElement.addEventListener('keyup', function(e) {
applyChange('message', e) }, false);
formElement = document.getElementById("fillOrStroke");
formElement.addEventListener('change', function(e) {
applyChange('fillOrStroke', e) }, false);
function applyChange (variable, e) {
eval(variable + ' = e.target.value');
drawScreen(); } 其中，各参数的含义如下：
- Text——在画布上渲染的文本；
- x——文本在画布上的x坐标；
- y——文本在画布上的y坐标。
- maxWidth——在画布上渲染文本的最大宽度（在写这本书时，这个属性才刚刚添加到浏览器中）。
context.strokeText() 函数（见图3-2）与此类似，但是它指定了在画布上文本笔触的轮廓。在context.strokeColor属性中设置渲染笔触所用的颜色，在context.font属性中设置所用的字体。函数的调用如下：
strokeText([text],[x],[y],[maxWidth])其中，各参数的含义如下：
- Text——在画布上渲染的文本；
- x——文本在画布上的x坐标；
- y——文本在画布上的y坐标；
- maxWidth——在画布上渲染文本的最大宽度）在写本书时，还没有在任何浏览器中实现这个属性）。
下一迭代的Text Arranger中，用户可以选择fillText或strokeText，或者两者都选。同时选择两者，会给fillText设置黑色的轮廓（strokeText）。在HTML