Если я нажму на любой кружок, он должен переместиться в центр страницы. - PullRequest
Новая
       10

Если я нажму на любой кружок, он должен переместиться в центр страницы.

0 голосов
/ 26 мая 2020

Я пытаюсь создать нечто вроде мониторинга. Здесь, когда я нажимаю на любой из двух кружков, только этот кружок переходит в центр страницы с некоторым увеличением. Может ли кто-нибудь помочь решить эту проблему? Я пробовал прослушиватель onclick, но когда я нажимаю, он не отвечает. Есть ли другой способ решить эту проблему? Пожалуйста, если у вас есть фрагмент кода. 

 const ctx = document.getElementById("Canvas").getContext("2d");
  const containerR = 100;
  const size = containerR * 2
  ctx.canvas.width = ctx.canvas.height = size;
  var canvas = document.getElementById("Canvas");
  var count = 10, // number of random  points
      cx = 75,
      cy = 75,
      radius = 99;
      ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

// create random points
while (count) {
    var pt_angle = Math.random() * 2 * Math.PI;
    var pt_radius_sq = Math.random() * radius * radius;
    var pt_x = Math.sqrt(pt_radius_sq) * Math.cos(pt_angle);
    var pt_y = Math.sqrt(pt_radius_sq) * Math.sin(pt_angle);
    ctx.beginPath();
    ctx.arc(pt_x + ctx.canvas.width / 2, pt_y + ctx.canvas.width / 2, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillStyle = '#1b8a03';
    count--;
}

//Canvas 2
  const ctx2 = document.getElementById("Canvas2").getContext("2d");
  const containerR2 = 100;
  const size2 = containerR2 * 2
  ctx2.canvas.width = ctx2.canvas.height = size2;
  var canvas2 = document.getElementById("Canvas2");
  var count2 = 10, // number of random  points
      cx2 = 75,
      cy2 = 75,
      radius2 = 99;
      ctx2.fillStyle = '#ffffff';
ctx2.beginPath();
ctx2.moveTo(cx2, cy2);
ctx2.arc(ctx2.canvas.width / 2, ctx2.canvas.height / 2, radius2, 0, 2 * Math.PI);
ctx2.closePath();
ctx2.fill();

// create random points
while (count2) {
    var pt_angle2 = Math.random() * 2 * Math.PI;
    var pt_radius_sq2 = Math.random() * radius2 * radius2;
    var pt_x2 = Math.sqrt(pt_radius_sq2) * Math.cos(pt_angle2);
    var pt_y2 = Math.sqrt(pt_radius_sq2) * Math.sin(pt_angle2);
    ctx2.beginPath();
    ctx2.arc(pt_x2 + ctx2.canvas.width / 2, pt_y2 + ctx2.canvas.width / 2, 5, 0, 2 * Math.PI);
    ctx2.fill();
    ctx2.fillStyle = '#1b8a03';
    count2--;
}
<canvas id="Canvas" 
  style = "background: #eee;
  margin-top: 5%;
  margin-left: 80%;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #000;
  align-content: right;"></canvas>
<canvas id ="Canvas2"
  style = "background: #eee;
  margin-top: 8%;
  margin-left: 80%;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #000;
  align-content: right;"></canvas>
...