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

Answer 1

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

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

在画布上打印输入标记值

1 个答案: