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

Рейтинг: 0Ответов: 1Опубликовано: 14.06.2023

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">Рисуй!</button>
    </form>
       </pre>
    <hr>

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

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

</html>

[![Должно получится, как на скрине][1]][1] [1]: https://i.sstatic.net/cwHTb.png
javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2

В вашем коде в форме стоит кнопка с типом 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">Рисуй!</button>
   </pre>
  </form>
  <hr>

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

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

</html>