<canvas>に画像上のユーザー入力を表示するにはどうすればよいですか？

私はこのコードを試しましたが、うまくいきません。キャンバスに画像を表示し、画像上にテキスト（ユーザー入力による）を表示するためのエラー（もしあれば）を教えてください。<canvas>に画像上のユーザー入力を表示するにはどうすればよいですか？

あなたはCK（）関数の前にこれを追加することによって、キャンバスのコンテキストを宣言する必要が

<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

：

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

また、ページのリロードを防ぐためにフォームを変更する必要があります

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

それが役に立てば幸い！

出典

2017-06-12 13:31:51 htn

は、<フォームアクション=「ジャバスクリプト：ボイド（0）;」>場合、それは変数の値を失うことになりますジャバスクリプト内で何が起こるか書かれていません？ –

フォームのデフォルト動作では、フォームを送信してページをリロードすることです。パーツアクション= "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

ちょっとアンフェタミン、私が作ったかったものをうまく作るためにdocument.onload。 –

@JohnyGatesが追加されました。 – amphetamachine

<canvas>に画像上のユーザー入力を表示するにはどうすればよいですか？

答えて

関連する問題