HTML 5 Canvas - значение пары ключей

Question

предыдущая дуга должна исчезнуть, и должна отображаться только последняя.

Вот код, который у меня есть до сих пор.

    context.fill();
    context.closePath();
  }

})(document);

function randomColor() {
  var color = [];
  for (var i = 0; i < 3; i++) {
    color.push(Math.floor(Math.random() * 256));
  }
  return 'rgb(' + color.join(',') + ')';
}

<canvas id="testCanvas" style="border:1px solid #000000;"></canvas>

Answer 1

Вот как это сделать:

• Нам нужно сохранить список всех кругов
• Зацикливание круга, проверяющее, перекрывает ли щелчок предыдущий
• Нам нужно обнаружить совпадения (столкновения) между двумя кругами, простой расчет Пифагора

Вот рабочий пример:

(function(doc) {

  var canvas = doc.getElementById("testCanvas");
  var context = canvas.getContext("2d");
  var circles = []

  function drawCircle(circle) {
    context.beginPath();
    context.fillStyle = circle.color;
    context.arc(circle.x, circle.y, circle.rad, 0, 2 * Math.PI, true);
    context.fill();
    context.closePath();
  }

  function collision(circle1, circle2) {
    var dx = circle1.x - circle2.x
    var dy = circle1.y - circle2.y
    return Math.sqrt(dx * dx + dy * dy) < (circle1.rad + circle2.rad);
  }

  function drawCircles(data) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawCircle(data)
    for (var i = circles.length - 1; i >= 0; i--) {
      if (collision(circles[i], data)) {
        circles.splice(i, 1);
      } else {
        drawCircle(circles[i])
      }
    }
    circles.push(data)
  }

  // click event handler
  canvas.onclick = function(e) {
    drawCircles({
      color: randomColor(),
      rad: 5 + Math.random() * 30,
      x: e.clientX - e.target.offsetLeft,
      y: e.clientY - e.target.offsetTop
    })
  }

})(document);

function randomColor() {
  var color = [];
  for (var i = 0; i < 3; i++) {
    color.push(Math.floor(Math.random() * 256));
  }
  return 'rgb(' + color.join(',') + ')';
}

<canvas id="testCanvas" style="border:1px solid #000000;"></canvas>

Чтобы сделать его интересным, я сделал новый круг со случайным радиусом ...
Если вы хотите сделать вещи еще более интересными (и иметьвремя) вместо того, чтобы исчезать перекрывающиеся круги, заставьте их двигаться и сжиматься, пока они не перекрываются.