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