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

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

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

更新

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

之前添加空格

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

Answer 2

我确信问题出现在context.font

中

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

我不确定我在代码中编写的内容是否正确 context.font = $（this）.css（“font-size”）+“Arial”;

控制画布中的文本大小（textarea）

2 个答案:

更新