HTML Canvas löscht Rechteck direkt nach dem Zeichnen

Auf Knopfdruck sollte ein Rechteck auf der zweiten Ebene meiner Leinwände gezeichnet werden und es sollte dort bleiben. Die Zeichnung funktioniert, der Aufenthalt nicht. Das Rechteck erscheint für einen Augenblick, verschwindet aber sofort wieder und ich kann nicht verstehen warum. Rechtecke, die ich bei Mausaktionen mit Ereignishörern zeichne, bleiben ...HTML Canvas löscht Rechteck direkt nach dem Zeichnen

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

Quelle

2016-05-17 Peter Leupold

Es ist, weil Sie Ihren gesamten Code in <form> eingegeben haben. Wenn Sie auf eine Schaltfläche in einem Formular klicken, wird es weitergeleitet und Sie navigieren von Ihrer Seite weg.

Entweder entfernen Sie die <form> (sieht nicht so aus, wie Sie es brauchen) oder Sie müssen Ihre draw2 Funktion ändern, um die Einreichung abzubrechen.

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

Oder Sie können die onsubmit Handler in das Formular direkt anschließen und dort gelöscht werden.

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

Quelle

2016-05-17 20:20:54

Dank! Ich brauche eigentlich die Form für Dinge, die hier für Prägnanz entfernt wurden. Ihre Vorschläge scheinen den Trick zu machen. –

Es scheint, dass das Formular übermittelt wird, wodurch die Seite neu geladen wird. Versuchen Sie ersetzen Sie diese Zeile:

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

mit diesem:

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

Edit: Diese Frage relevant scheint - Want html form submit to do nothing

Quelle

2016-05-17 20:18:18 MSoRMvzH8g

Ich denke, es ist, weil Sie ein Formular-Tag haben, die ein vorlegen auslöst.

Entfernen Sie das Formular-Tag und es wird funktionieren.

Quelle

2016-05-17 20:18:50

Ihr Problem ist Ihr Formular-Tag, es übermittelt das Formular, wenn Sie auf die Schaltfläche klicken.

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>

Quelle

2016-05-17 20:21:29 pandavenger

HTML Canvas löscht Rechteck direkt nach dem Zeichnen

Antwort

Verwandte Themen