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 元素本身中定義。