-2

JavaScript を使用してキャンバスで作業する場合、ctx.fillText を使用して入力値を返すことは可能ですか?

私が推測するこのようなもの：

(html)
    (Customize:(input id="custom" value="Default Message" /)
    (p)(button onclick="msg()")Try it(/button)(/p)
    (canvas id="myCanvas" width="500" height="500")
    (/canvas)
(/html)

(script)

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d");

var message
message = document.getElementById("custom").value;

function msg(){
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.font = "italic 800 30px Verdana";
    ctx.fillText(message, 485, 245, 1000);
}

msg();

(/script)

したがって、ユーザーが入力に入力したものはすべて、[試してみる] をクリックするとキャンバスに描画されます。これは可能ですか、それとも軌道から外れていますか?

4

1 に答える 1

0

コードを試しましたか？messageユーザーが変更したときに変更できるように関数内の値を決定する必要があることを除いて、基本的には問題ありmsg()ません。新しい色を選択するか、キャンバスに色を追加して、表示できるようにする必要があります。

<body>
Customize:<input id="custom" value="Default Message" />
    <p><button onclick="msg()">Try it</button></p>
    <canvas style="background-color:#cccccc" id="myCanvas" width="500" height="500">
    </canvas>
    <script>
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d");

    var message;

    function msg(){
    message=document.getElementById('custom').value;
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.font = "italic 800 30px Verdana";
    ctx.fillText(message, 100, 245, 1000);
    }

    msg();
    </script>
</body>
于 2013-03-15T16:16:08.053 に答える