キャンバスは一度画面がクリアされました

キャンバスに長方形を表示するボタンが必要でした。しかし、これはスクリプトが呼び出された後に消されます。キャンバスは一度画面がクリアされました

<!DOCTYPE html> 
<html> 
<body> 

<form> 

<br>depth = : <input type="number" id="depthValue" name="depthValue" value="2"><br> 
<input type="submit" value="Submit" onclick="calculate()"> 


</form> 
<canvas id="canvas" width="1000" height="1000" style="background-color:#EE2"></canvas> 


<script> 

function calculate() { 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "rgb(255, 0, 0)"; 
ctx.fillRect(0,0,300,300); 
} 

</script> 

</body> 
</html>

矩形が表示されますが、すぐに消去されます。

何が起こっているのですか？

出典

2016-12-30 James Roberts

Enterを押して消えると表示されますか？ – Gacci

これは、Enterキーを押してフォームを送信するためです。だから、あなたはそれが爽やかであるかのように考えることができます。だから、これを解決するには、フォームが提出されないようにしてください。次のonsubmit="return false; "のインラインまたはこれを使用するjavascript

form.addEventListener("submit", function(e){ 
    e.preventDefault(); 
})

出典

2016-12-30 22:41:15 Gacci

こんにちは - ありがとう。私は間違ってこれを実装しているかもしれませんが、あなたは間違いなく正しい行にあります。私は、onclick（）関数が呼び出された後、匿名のJavaスクリプトを実行していることがわかります。

私は明らかに何かを見逃したり、あなたのアドバイスを誤解している可能性があります –

キャンバスは一度画面がクリアされました

答えて

関連する問題