холст очищен после завершения экрана

Я хотел иметь кнопку, чтобы показать прямоугольник на холсте. Но это очищается после вызова сценария.холст очищен после завершения экрана

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

Привет - спасибо. Вы, безусловно, на правильном пути, хотя я могу ошибочно реализовать это. Я вижу, что я запускаю анонимный java-скрипт после вызова функции onclick(). Даже когда я обновляю объявление

Возможно, я пропустил что-то очевидное или неправильно понял ваши советы –

холст очищен после завершения экрана

ответ

Смежные вопросы