Question

按下按钮时，应在画布的第二层上画一个矩形，它应该留在那里。绘图有效，留下没有。矩形会立即出现，但会立即消失，我无法弄清楚原因。我在事件监听器上使用鼠标操作绘制的矩形会保留...

<html>
<body>


<h2>Raumaufteilung a: </h2>

<form action="" id="inputTactics"> 
<table border="1">
<tr><td><button id="Butt0" onclick="draw2()">Alle</button></td>
    <td  width="600" height="400"  valign="top"> 
        <div id="TacticsPic">  
          <canvas id="ground" width="525" height="340"
                style="border:2px solid #ffffff; background-color: #23D419; position: absolute; z-index: 0">
          </canvas>
          <canvas id="c2" width="525" height="340"
                style="position: absolute; z-index: 1">
          </canvas>
          <canvas id="c3" width="525" height="340"
                style="position: absolute; z-index: 2">
          </canvas>
            <br>
        </div>
    </td>
    </tr>  
</table>  
</form>   


<script>

    var canvasTac = document.querySelector("#c2");
    var ctxTac = canvasTac.getContext('2d');


function draw2() {
    ctxTac.strokeRect(100,100,250,100);
};

</script>

</body>
</html>

Answer 1

表单似乎正在提交，导致页面重新加载。尝试替换此行：

<form action="" id="inputTactics">

用这个：

<form onsubmit="return false;" id="inputTactics">

编辑：这个问题似乎很相关 - Want html form submit to do nothing

Answer 2

这是因为您已将所有代码放在<form>中。按表单中的按钮提交它，您将离开页面。

删除<form>（看起来不像你需要）或者你需要修改你的draw2功能来取消提交。

function draw2() {
  ctxTac.strokeRect(100, 100, 250, 100);
  event.preventDefault();
}

或者您可以直接将onsubmit处理程序附加到表单并在那里取消它。

<form action="" id="inputTactics" onsubmit="return false;">

Answer 3

您的问题是您的表单标记，如果您点击该按钮，则会提交表单。

var canvasTac = document.querySelector("#c2");
var ctxTac = canvasTac.getContext('2d');


function draw2() {
  ctxTac.strokeRect(100, 100, 250, 100);
};

document.getElementById("Butt0").addEventListener("click", draw2);

<h2>Raumaufteilung a: </h2>

<table border="1">
  <tr>
    <td>
      <button id="Butt0">Alle</button>
    </td>
    <td width="600" height="400" valign="top">
      <div id="TacticsPic">
        <canvas id="ground" width="525" height="340" style="border:2px solid #ffffff; background-color: #23D419; position: absolute; z-index: 0">
        </canvas>
        <canvas id="c2" width="525" height="340" style="position: absolute; z-index: 1">
        </canvas>
        <canvas id="c3" width="525" height="340" style="position: absolute; z-index: 2">
        </canvas>
        <br>
      </div>
    </td>
  </tr>
</table>

Answer 4

我认为这是因为你有一个触发提交的表单标签。

取走表格标签，它会起作用。

HTML画布在绘制

4 个答案: