0

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は、フォントのサイズとファミリを受け入れるためです。

コードに記述した内容が正しい構文であるかどうかはわかりません。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 に答える