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

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

javascript html html5-canvas

Javascript 控制画布中的文本大小（textarea）,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我想创建一个画布来显示textarea中的文本。我在控制textarea中文本的大小时遇到问题。换句话说，我希望用户选择文本的大小，然后将其写入文本区域，单击按钮后，文本区域将显示在画布上我尝试了这个代码，但有一个问题我不知道它是什么。以下是代码示例： <script> var y = 30; function pasteText() { Text=document.getElementById('textarea').value; var x = 30; var line

我想创建一个画布来显示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>


变量y=30；
函数pasteText（）
{
Text=document.getElementById（'textarea'）。值；
var x=30；
var线宽=15；
变量行=Text.split（'\n'）；
$（“#clr2字体”）。单击（函数（）{
context.fillStyle=$（this.css（“color”）；
});
$（“#clr3字体”）。单击（函数（）{
context.font=$（this.css（“字体大小”）+“Arial”；
});
对于（var i=0；i您的代码中有很多问题，有些问题会立即出现：

中的循环代码未括在大括号中{}

单击处理程序在粘贴文本
函数中定义，因此只有在用户单击粘贴文本按钮后才会注册
标签不是标准标签，一些浏览器，尤其是IE不喜欢它

更新：
是否可能缺少字体大小和字体之间的空格？尝试在Arial
前面添加空格：
context.font=$(this).css("font-size")+ " Arial"; 

我确信问题出在context.font中
因为context.font接受字体的大小和系列
我不确定我在代码中写的语法是否正确
context.font=$（this.css（“字体大小”）+“Arial”
谢谢你的回复。实际上for循环很好，字体标签在firefox中也很有效。当用户单击“粘贴”按钮时，文本将显示在画布上，这就是我希望程序执行的操作。问题在于大小，例如，当我单击“大”时，画布会显示我不想要的默认大小。任何help Pleaaaase添加了另一个可能的修复程序，如果这无助于尝试在JSFIDLE中构建代码，那么每个人都可以更轻松地在那里调试代码。任何帮助Pleaaaase:-（感谢Varaint它可以工作问题在“Arial”之前的空格中。