изображение отрисовывается и сразу исчезает

Question

function drawSquares() {
  var canvas = document.querySelector("#canvas");
  var ctx = canvas.getContext("2d");
  let squareSize = 5;
  var step = parseInt(document.querySelector("#step").value);
  for (var i = 0; i < 15; i++) {
    ctx.strokeRect(0, 0, squareSize, squareSize);
    squareSize += step;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Рисуем квадраты</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <meta charset="utf-8">
</head>

<body>
  <form name="panel">
    <pre>
         Шаг: <input name="step" type="number" id="step"> <button input type="submit" onclick="drawSquares()">Рисуй!</button>
    </form>
       </pre>
    <hr>

    <canvas id="canvas"></canvas>

    <CANVAS id="canv" width="300" height="300">
       Браузер не поддерживает элемент CANVAS.
      </CANVAS>
</body>

</html>

[![Должно получится, как на скрине][1]][1] [1]: https://i.stack.imgur.com/cwHTb.png

Answer 1

В вашем коде в форме стоит кнопка с типом submit значит при нажатии происходит отправка формы и страница перезагружается, что выглядит как "все исчезло"

замените:

<button input type="submit" onclick="drawSquares()">Рисуй!</button>

на

<button type="button" onclick="drawSquares()">Рисуй!</button>

function drawSquares() {
  var canvas = document.querySelector("#canvas");
  var ctx = canvas.getContext("2d");
  let squareSize = 5;
  var step = parseInt(document.querySelector("#step").value);
  for (var i = 0; i < 15; i++) {
    ctx.strokeRect(0, 0, squareSize, squareSize);
    squareSize += step;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Рисуем квадраты</title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <meta charset="utf-8">
</head>

<body>
  <form name="panel">
    <pre>
     Шаг: <input name="step" type="number" id="step"> <button type="button" onclick="drawSquares()">Рисуй!</button>
   </pre>
  </form>
  <hr>

  <canvas id="canvas"></canvas>

  <CANVAS id="canv" width="300" height="300">
   Браузер не поддерживает элемент CANVAS.
  </CANVAS>
</body>

</html>

БЛОГ НА HUSL

изображение отрисовывается и сразу исчезает

Ответы (1 шт):