HTML5 点击按钮后一切消失

Question

我是 html5 的新手。我不确定这里发生了什么，我正在尝试做到这一点，因此无论何时单击按钮，canvas 中都会出现一个二次函数。但是在我写的内容中，每当我单击按钮时，所有内容都会在实际绘制请求的曲线后立即消失。这是代码 jsfiddle

<!DOCTYPE html>

<body>
<form action="">
a: <input type="text" name="tbax2" id="itbax2" value=0.01 size="4">
b: <input type="text" name="tbbx" id="itbbx" value=1 size="4">
c: <input type="text" name="tbc" id="itbc" value=40 size="4">
<button onclick="dibujarCurva()">Graficar</button>

</form>

<canvas id="myCanvas" width="500" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function dibujarCurva(){
 var ax2 = parseFloat(document.getElementById('itbax2').value);
 var bx = parseFloat(document.getElementById('itbbx').value);
 var c = parseFloat(document.getElementById('itbc').value);
 ctx.beginPath();
 ctx.strokeStyle = '#FF0000'
 x=0
 ctx.moveTo(0,150-(ax2*(x-250)*(x-250) + bx*(x-250) + c));
 while (x<501){
  ctx.lineTo(x,150-(ax2*(x-250)*(x-250) + bx*(x-250) + c));
  x=x+10
  ctx.stroke();}
  ctx.closePath();
 }
function dibujarGrid(){
 ctx.beginPath();
 ctx.strokeStyle = '#F2F2F2'
 ctx.moveTo(0,0);
 x=0
 while (x<501){
  ctx.moveTo(x,0);
  ctx.lineTo(x,300);
  x=x+10
  ctx.stroke();}
 x=0
 while (x<301){
  ctx.moveTo(0,x);
  ctx.lineTo(500,x);
  x=x+10
  ctx.stroke();}
 ctx.closePath();
 ctx.beginPath();
 ctx.strokeStyle = '#000000'
 ctx.moveTo(250,0);
 ctx.lineTo(250,300);
 ctx.stroke();
 ctx.moveTo(0,150);
 ctx.lineTo(500,150);
 ctx.stroke();
 }
 dibujarGrid()
 ctx.fillText(("ax^2 + bx + c"),10,20);
</script>

</body>

Answer 1

似乎正在尝试提交表单。一个快速简单的解决方法是按如下方式更改您的 onclick：

<button onclick="return dibujarCurva()">Graficar</button>

并添加一个

return false;

到 dibujarCurva() 函数的末尾。

如果您想有条件地提交，这很有用。然而，正如 slicedtoad 和 acontell 所指出的，下面也将在不对函数进行任何修改的情况下解决它。

<button type="button" onclick="dibujarCurva()">Graficar</button>

Answer 2

您可以添加按钮的类型属性并阻止其发送表单：

<button type="button" onclick="dibujarCurva()">Graficar</button>

HTML5 点击按钮后一切消失

HTML5 Everything disappears after clicking a button

html

javascript

canvas