0

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

2 回答 2

0

我确定问题出在 context.font

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

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

于 2011-07-13T16:43:25.983 回答
0

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

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

更新：

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

context.font=$(this).css("font-size")+ " Arial";
于 2011-07-12T22:48:22.403 回答