Question

您好我正在尝试将这些内容实施到我当前的应用中。如果用户点击新圆圈越过旧圆圈的点，我想隐藏重叠的圆圈。因此，我必须删除或隐藏先前绘制的圆，然后在画布中创建新圆。我当前的代码运行良好，但没有隐藏重叠的圆圈。所以我坚持下去。我不知道如何制作一个json数组来存储绘制的圆的位置，然后在用户点击或绘制在同一个圆圈附近时删除它们。圆半径我保持为30.这是我当前的代码。

 <!DOCTYPE html>
 <html lang="en">
<head>
    <title>Canvas Sample -- Arc Shapes</title>
    <meta charset="utf-8">
    <script src="circle2.js"></script>
  <style type="text/css">

#testCanvas {
border: 1px solid #999
 }


  </style>  

</head>
<body>

     <canvas id="testCanvas" width="400" height="400"> </canvas>

</body>
</html>

// javascript代码

window.onload = init;

// access the canvas element and its context
function init() {

 var canvas = document.getElementById("testCanvas");
 var context = canvas.getContext("2d");
// add click handler
canvas.onclick = function(e) {
   var pos = getMousePos(canvas, e);     // get position as before
   context.fillStyle = randomColor();    // get the fill color
   var path=[]; //array to store the positions.

   // fill a circle
   context.beginPath();                  
   context.arc(pos.x, pos.y, 30, 0, 2 * Math.PI); 
  context.fill();

  }

 }

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

   function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
      };
    }

Answer 1

单击鼠标时，只需存储每个圆的坐标即可。你可以使用一个数组。然后你需要一堆方法来处理鼠标点击，圆形交叉点，最后绘制它们。

我修改了你的脚本如下：

// access the canvas element and its context
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var circles = []; // An empty array to hold our circles

// add click handler
canvas.onclick = function(e) {
  var pos = getMousePos(canvas, e);
  addCircle(pos.x, pos.y);
}

function addCircle(mouse_x, mouse_y) {
  // First, we check if there is any intersection with existing circles
  for (var i = circles.length - 1; i > 0; i--) {
    var circle = circles[i],
      distance = getDistance(circle.x, circle.y, mouse_x, mouse_y);

    // If distance is less than radius times two, then we know its a collision
    if (distance < 60) {
      circles.splice(i, 1); // Remove the element from array
    }
  }

  // Second, we push the new circle in the array
  circles.push({
    x: mouse_x,
    y: mouse_y,
    color: randomColor()
  });

  // Third, we draw based on what circles we have in the array
  drawCircles();
}

function drawCircles() {
  // We'll have to clear the canvas as it has deleted circles as well
  context.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = circles.length - 1; i > 0; i--) {
    var circle = circles[i];

    context.fillStyle = circle.color;
    context.beginPath();
    context.arc(circle.x, circle.y, 30, 0, 2 * Math.PI);
    context.fill();
  }
}

// Function to get distance between two points
function getDistance(x1, y1, x2, y2) {
  // Distance formula
  return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
}

function randomColor() {
  var color = [];
  for (var i = 0; i < 3; i++) {
    color.push(Math.floor(Math.random() * 256));
  }
  return 'rgb(' + color.join(',') + ')';
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

canvas {
  border: 1px solid #999
}

<canvas id="testCanvas" width="400" height="400"> </canvas>

如果用户点击同一区域

1 个答案: