Question

我想要一个按钮在画布上显示一个矩形。但是在调用脚本之后会擦除它。

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

出现矩形，但会立即消除。

发生了什么事？

Answer 1

这是因为您通过按Enter键提交表单。所以，你可以把它当作一个令人耳目一新的想法。因此，要解决此问题，请停止提交表单。使用以下onsubmit="return false; "或使用此

的javascript内联

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

屏幕完成后，画布清除

1 个答案: