Question

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

<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>

Answer 1

您需要通过在ck（）函数之前添加它来声明画布上下文：

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

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

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

希望它有所帮助！

Answer 2

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

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

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

2 个答案: