0

入力タグの値をキャンバスに描画したい...次のコードは機能しませんでした。 

    window.onload()=draw()
    draw(){
    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');

    var text=document.getElementById('item').value
    ctx.fillStyle="#3e3e3e";
    ctx.font="16px Arial";
    ctx.fillText(text,50,50);
    }
4

1 に答える 1

0

キーアップイベントを「リッスン」して、キャンバスにテキストを描画できます

ここにコードとフィドルがあります： http://jsfiddle.net/m1erickson/ug88R/

<!doctype html>
<html>
<head>

<script>
    function draw(event){
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var text=document.getElementById('item').value
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.fillStyle="#3e3e3e";
        ctx.font="16px Arial";
        ctx.fillText(text,50,50);
    }

    window.addEventListener("keyup", draw, true);

</script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
    <input type="text" id="item">
</body>
</html>
于 2013-04-12T17:46:02.803 に答える