HTML Холст стирает прямоугольник сразу после рисования

Нажав кнопку, на втором слое моих холстов должен быть нарисован прямоугольник, и он должен оставаться там. Работа рисунка, оставаясь нет. Прямоугольник появляется на мгновение, но сразу исчезает снова, и я не могу понять, почему. Прямоугольники, что я рисую на действия мыши со слушателями событий остаться ...HTML Холст стирает прямоугольник сразу после рисования

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

источник

2016-05-17 Peter Leupold

Это потому, что вы поместили весь свой код в <form>. Нажатие кнопки в форме отправляет ее, и вы будете перемещаться от своей страницы.

Либо удалите <form> (не похоже, что вам это нужно), либо вам потребуется изменить функцию draw2, чтобы отменить отправку.

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

Или вы можете прикрепить onsubmit обработчик формы непосредственно и отменить его там.

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

источник

2016-05-17 20:20:54

Спасибо! Мне действительно нужна форма для вещей, которые были убраны здесь для краткости. Ваши предложения, похоже, делают трюк. –

Кажется, форма представления, в результате чего страница перезагрузить. Попробуйте заменить эту строку:

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

с этим:

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

Edit: Этот вопрос представляется актуальным - Want html form submit to do nothing

источник

2016-05-17 20:18:18 MSoRMvzH8g

Я думаю, это потому, что у вас есть форма тег, который запуская представить.

Заберите тег формы и он будет работать.

источник

2016-05-17 20:18:50

Ваша проблема - ваш тег формы, он отправляет форму, если вы нажмете кнопку.

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>

источник

2016-05-17 20:21:29 pandavenger

HTML Холст стирает прямоугольник сразу после рисования

ответ

Смежные вопросы