JS文本到图像改变字体大小

Question

http://jsfiddle.net/amaan/WxmQR/1

HTML：

<canvas id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>

CSS：

canvas{
    border: 1px black solid;
}
#textCanvas{
    display: none;
}

JS：

var tCtx = document.getElementById('textCanvas').getContext('2d'),
    imageElem = document.getElementById('image');

document.getElementById('text').addEventListener('keyup', function (){
    tCtx.canvas.width = tCtx.measureText(this.value).width;
    tCtx.fillText(this.value, 0, 10);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);
}, false);

这段代码是我想要的，但我希望能够使字体变大，图像具有固定的宽度和高度，并使文本溢出到下一行。 提前致谢。

Answer 1

最短路径：

document.getElementById("myP").style.fontSize = "xx-large";

但是，这将向文本区域元素添加style属性，这是不推荐的。 相反，创建一个具有所需字体大小的类并像这样调用它：

document.getElementById("myP").className = "MyClass"; 

正如最佳实践所述，所有设计都应该在样式表（css 文件）中，而不是在 html 元素本身中定义。