Это часть моего кода, где мне это нужно, но я не знаю, как делать это бесконечно, как мне добавить цикл? Мне нужен прямоугольник, и когда я загружаю страницу, он должен появляться в случайном месте на холсте, и каждые 5 секунд новый прямоугольник должен появляться в новой позиции, прямоугольники всегда одного размера

function rectangle(x,y){
    var ctx
    ctx.beginPath();
    ctx.rect(20, 20, 15, 10);
    ctx.stroke();
    }
 function randomMove(){
    var myVar;
    var x;
    var y;
    x = Math.floor(Math.random() * 10) + 1;
    y = Math.floor(Math.random() * 10) + 1;
    myVar = setInterval( ()=> {rectangle(x,y)}, 5000); // pass the rectangle function
    }
0
Luna Rupert 9 Апр 2021 в 09:07

2 ответа

Лучший ответ

Вам нужно рекурсивно вызвать функцию randomMove; Таким образом, вы сгенерируете бесконечный цикл, который будет отображать новые прямоугольники каждые 5 секунд:

function randomMove() {
  const x = Math.floor(Math.random() * 10) + 1;
  const y = Math.floor(Math.random() * 10) + 1;

  rectangle(x,y); // Define rectangle

  setTimeout(() => {
    randomMove() // Wait 5s before iterating recursively
  }, 5000)
}

Кроме того, если вы хотите удалить свой предыдущий прямоугольник перед рисованием нового, вам необходимо:

  1. Определите контекст холста (ctx) вне функции rectangle, чтобы вы могли получить к нему доступ напрямую внутри randomMove

  2. Определите этот бит непосредственно перед вызовом вашей функции rectangle, чтобы очистить предыдущий рисунок:

ctx.clearRect(0, 0, canvas.width, canvas.height);
0
ale917k 9 Апр 2021 в 06:37

Рабочий пример:

var canvas = document.querySelector('canvas');
canvas.width = 300;
canvas.height = 150;
var ctx = canvas.getContext('2d');

setInterval(drawRect, 500, ctx);

function drawRect(ctx) {
  var x = Math.floor(Math.random() * ctx.canvas.width) + 1;
  var y = Math.floor(Math.random() * ctx.canvas.height) + 1;
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(x, y, 15, 10);
}
<canvas></canvas>
0
Anastazy 9 Апр 2021 в 06:43