Как случайным образом дублировать объекты на холсте

Question

Я сделал фейерверк на холсте. Я хочу продублировать это в случайном месте внутри холста.

Наконец, я хочу запустить в случайном порядке из случайных мест. Что еще мне добавить?

var ctx = document.getElementById('canvas').getContext('2d');

ctx.translate(100, 100);

function fireworks() {
  //clipping
  ctx.beginPath();
  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
  ctx.clip();

  var x = 130; //final position
  var t = 0; //0-1, this is what you change in animation loop
  var tx = 0; //actual position of element for x

  function myLoop() {
    ctx.clearRect(-(canvas.width / 2), -(canvas.height / 2), canvas.width, canvas.height);
    tx = EasingFunctions.easeInOutQuad(t) * x;
    for (var i = 0; i < 12; i++) {
      ctx.beginPath();
      ctx.rotate(Math.PI / 6);
      ctx.arc(tx, tx, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
    }

    if (t < 1) {
      t += 0.01; //determines speed
      requestAnimationFrame(myLoop);
    }
  }
  myLoop();
}
EasingFunctions = {
  easeInOutQuad: function(t) {
    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t
  }
}


fireworks();

#canvas {
  border: 1px solid #000;
}

<canvas id="canvas" width="800" height="600"></canvas>

Answer 1

Решение содержит несколько шагов:

1. Вызов fireworks после завершения последнего "фейерверка".
2. Случайное начальная позиция фейерверка.
3. Очистить состояние clip с помощью .restore() и .save()

Я добавил комментарии в коде.

var ctx = document.getElementById('canvas').getContext('2d');

function fireworks() {
  // restore and save to reset the "clip" state
  ctx.restore();
  ctx.save();
  //clipping
  ctx.beginPath();
  // move to a random position in the canvas before drawing
  ctx.translate(random(canvas.width), random(canvas.height));
  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
  ctx.clip();

  let tx = 0; //actual position of element for x
  let t = 0;

  function myLoop() {
    ctx.clearRect(-(canvas.width / 2), -(canvas.height / 2), canvas.width, canvas.height);
    tx = EasingFunctions.easeInOutQuad(t) * 130;
    for (var i = 0; i < 12; i++) {
      ctx.beginPath();
      ctx.rotate(Math.PI / 6);
      ctx.arc(tx, tx, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
    }

    if (t < 1) {
      t += 0.01; //determines speed
      requestAnimationFrame(myLoop);
    } else {
      // the firework is done, let's create another one
      fireworks();
    }
  }
  myLoop();
}

function random(max, min = 0) {
  return Math.floor(Math.random() * max) + 1;
}

EasingFunctions = {
  easeInOutQuad: function(t) {
    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t
  }
}

fireworks();

#canvas {
  border: 1px solid #000;
}

<canvas id="canvas" width="800" height="600"></canvas>