HTML畫布在繪制后立即擦除矩形

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

編輯：這個問題似乎相關- 想要html表單提交不執行任何操作

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 個解決方案

解決方案1
2 2016-05-17 20:18:18

解決方案2
1 已采納 2016-05-17 20:20:54

解決方案3
1 2016-05-17 20:21:29

解決方案4
0 2016-05-17 20:18:50

HTML畫布在繪制后立即擦除矩形

問題描述

4 個解決方案

解決方案1 2 2016-05-17 20:18:18

解決方案2 1 已采納 2016-05-17 20:20:54

解決方案3 1 2016-05-17 20:21:29

解決方案4 0 2016-05-17 20:18:50

解決方案1
2 2016-05-17 20:18:18

解決方案2
1 已采納 2016-05-17 20:20:54

解決方案3
1 2016-05-17 20:21:29

解決方案4
0 2016-05-17 20:18:50