如何在<canvas>中显示图像上的用户输入?

时间:2017-06-12 13:11:30

标签: javascript canvas

我已经尝试过这段代码,但它并没有成功。 请告诉错误(如果有的话)或建议一个很好的简短代码,用于在画布上显示图像,然后在图像上显示文本(通过用户输入)。

<html>
<body>
<form>
<input type="text" id="nm" placeholder="Name" value="some name">
<button onclick="ck()">Preview</button>
</form>
<canvas style="border:1px solid black;" height="500" width="700" id="can">          </canvas>
<script>
var can=document.getElementById('can').getcontext('2d');
function ck() {

    function def(){
        var img=new Image();
        can.font='40px algerian';
        img.src="form.jpg";
        img.onload=function() {
            can.drawImage(img,0,0,700,500);
            can.fillText("your name",400,200);
        };
    }

    function nondef() {
        var img=new Image();
        can.font='40px algerian';
        img.src="form.jpg";
        img.onload=function() {
            var nm=document.getElementById("nm").value;
            can.drawImage(img,0,0,700,500);
            can.fillText("nm",400,200);
        };

    }
    if(document.getElementById(nm).value=="")
        def();

    else
        nondef();
}
</script>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

您需要通过在ck()函数之前添加它来声明画布上下文:

can = document.getElementById('can').getContext("2d");

此外,您应该修改表单以防止页面重新加载:

<form action="javascript:void(0);">

希望它有所帮助!

答案 1 :(得分:0)

document.getElementById只有在DOM完全构建后才会获取元素。您必须将其附加到document.onload处理程序:

window.document.onload = function (e) {
    window.can=document.getElementById('can').getcontext('2d');
}