如何在<canvas>中的圖像上顯示用戶輸入？

我已經試過這段代碼，但沒有成功。請告訴錯誤（如果有的話）或建議一個偉大和短的代碼在畫布上顯示圖像，然後在圖像上顯示文字（通過用戶輸入）。如何在<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>

來源

2017-06-12 Johny Gates

需要由CK之前添加此聲明畫布上下文（）函數：

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

此外，您應該修改窗體，以防止頁面重載：

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

希望能幫助到你！

來源

2017-06-12 13:31:51 htn

內的JavaScript這使得它失去了變量的值，如果<形式行動=「JavaScript的：無效（0）;」>發生了什麼不寫？ –

表單的默認行爲是提交該表單，因此重新加載頁面。 part action =「javascript：void（0）;」有助於防止這種默認行爲。還有其他好的東西在這裏供您參考：https://stackoverflow.com/questions/7803814/prevent-refresh-of-page-when-button-inside-form-clicked – htn

document.getElementById只有DOM完全構建後纔會拾取元素。你必須是連接到document.onload處理程序：

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

來源

2017-06-12 15:54:48 amphetamachine

嘿amphetamachine，請舉例說明代碼document.onload成功做出我想做的事。 –

@JohnyGates新增。 – amphetamachine

如何在<canvas>中的圖像上顯示用戶輸入？

回答

相關問題