Question

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

JS文本图像改变字体

1 个答案: