控制画布中的文本大小 (textarea)

Question

我想创建一个显示来自 textarea 的文本的画布。 我在控制 textarea 中的文本大小时遇到​​问题。 换句话说，我希望用户选择文本的大小，然后将其写入文本区域，一旦单击按钮，文本区域就会显示在画布上。

我试过这段代码，但有一个问题我不知道它是什么。 以下是代码示例：

<script>
var y = 30;
function pasteText()
{

Text=document.getElementById('textarea').value;
var x = 30;
var lineheight = 15;
var lines = Text.split('\n');

$("#clr2 font").click(function (){
context.fillStyle=$(this).css("color");
});

$("#clr3 font").click(function (){
context.font=$(this).css("font-size")+ "Arial";
});

for (var i = 0; i<lines.length; i++)


    context.fillText(lines[i], x, y + (i*lineheight) );
    y+=38;
}


</script>
<body>

<canvas class="canvas" id="canvas" width="600" height="200" style="border:1px solid"> </canvas>

<font id="clr3">
<font style="font-size:9pt;"> Small</font>
<font style="font-size:16pt;"> Medium</font>
<font style="font-size:24pt;"> Large</font>
</font>


 <textarea name="textarea" cols="72" rows="6" id="textarea" value="Type the text here" ></textarea>
 <input  type="button" name="paste" value="Paste on the canvas" onClick="pasteText()"/>

<script type="text/javascript">
    var container = layer2.parentNode;

    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');

</script>
</body>

Answer 1

我确定问题出在 context.font

因为 context.font 接受字体的大小和系列。

我不确定我在代码中写的语法是否正确 context.font=$(this).css("font-size")+ "Arial";

Answer 2

您的代码中有很多问题，有些问题会立即弹出：

• for 循环代码未包含在大括号 { } 中
• 点击处理程序在pasteText 函数中定义，因此只有在用户点击粘贴文本按钮后才会注册。
• <font> 标签不是标准标签，一些浏览器，尤其是 IE 不喜欢它。

更新：

是否可能缺少字体大小和字体之间的空格？尝试在Arial前加一个空格：

context.font=$(this).css("font-size")+ " Arial";