html5-canvas - 在画布上打印输入标签值

Question

我希望输入标签值在画布上绘制...以下代码不起作用。

    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);
    }

score 0 · Accepted Answer

您可以“监听”任何按键事件并在画布上绘制文本

这是代码和小提琴：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>

html5-canvas - 在画布上打印输入标签值

1 回答 1

Related

Reference