1

HTML5キャンバスを少し試してみて、楽しい小さなWebアプリを作成しているだけですが、行き詰まってしまいました。

ユーザーがテキストボックスにテキストを入力し、ボタンを押すと、そのテキストがTextFillでキャンバスに追加されるようにします。

これが私が持っているものです：

        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var words = document.getElementById("words").value;
        var x = 80;
        var y = 110;

        ctx.font = "bold 36px sans-serif";
        ctx.fillStyle = "blue";
        $('#entertext').click(function(){
            ctx.fillText(words, x, y);
        });

だから私は明らかにキャンバス、myCanvas、id = wordsのテキスト入力ボックス、そしてid=entertextのボタンを持っています...

私のコードを完全にやり直したいのなら、それはまったく問題ありません。

4

1 に答える 1

0

コメントから拡張すると、のような「静的」コンテキストで割り当てていると思います。wordswindow.onload

は文字列であるため、 value によってdocument.getElementById("words").value割り当て/コピーされるため、後でどうなるかに関係なく、空の文字列になる可能性が非常に高くなります。wordsdocument.getElementById("words").value

したがって、解決策は assign wordsasdocument.getElementById("words")であるため、オブジェクトの「ポインター」clickであるか、イベント内の値を取得します。

$('#entertext').click(function(){
    ctx.fillText($("#words").val(), x, y);
});

作業デモ。

于 2013-02-22T03:22:24.947 に答える