一旦用户点击它，删除在 html5 画布中绘制的圆圈答案

【问题标题】：Remove circle drawn in html5 canvas once user clicks on it一旦用户点击它，删除在 html5 画布中绘制的圆圈
【发布时间】：2015-12-20 14:51:43
【问题描述】：

我编写了一个代码，在画布中随机生成 60 个圆圈，我该如何处理按下的事件 onclick 圆圈消失，然后生成另一个？这可能是最好的解决方案？代码是：

var canvas, ctx;
var circles = [];
var selectedCircle;
var vel=200;    

function Circle(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}

function clear() { // clear canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawCircle(ctx, x, y, radius) {

    var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

function generate(){

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

    var circleRadius = 25;
    var width = canvas.width;
    var height = canvas.height;
    var timer, j = 0;

    var circlesCount = 60;
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;
        var y = Math.random()*height;    
        circles.push(new Circle(x,y,circleRadius));
    }

    timer = window.setInterval(function()

    {
        if(j==60)
        {
            clear();
            return;
        }
        drawCircle(ctx, circles[j].x, circles[j].y, circles[j].radius);
        // go to next circle
        j++;
    }, vel);
}

【问题讨论】：

您的圈子与其他圈子重叠。你打算如何清除它？
是的，我怎样才能不重叠圆圈并单击删除圆圈？
如何将生成的圆的所有位置保存到一个数组中，然后在绘制新圆之前检查（计算）它。
好的，然后点击事件删除圈子？请帮我写代码
什么都没有？请帮帮我

标签： javascript arrays canvas onclick html5-canvas

【解决方案1】：

这个 IMO 的最佳解决方案是使用 svg，它会创建 SVGElements，每个元素都有自己的事件接口。

现在，使用画布并非不可能，但正如@VickyGonsalves 所述，您必须存储所有圆圈的位置，计算它们的表面并检查点击事件的 clientX 和 clientY 是否在其中之一内，然后重绘整个而不被点击。

但是，新的Path2D 接口允许存储路径并在以后重用它们，或者将它们用于上下文的方法中，例如fill() 和isPointInPath()。

所以这是一个使用Path2d() 构造函数的简单解决方案，即is supported neither by IE, nor by Safari。

var canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d'),
  circles = [];
document.body.appendChild(canvas);
canvas.width = 500;
canvas.height = 500;

function Circle(x, y, radius) {
  var c = new Path2D();
  c.arc(x, y, radius, 0, Math.PI * 2);
  return c;
}

function init() {
  ctx.strokeStyle = 'white';
  for (var i = 0; i < 60; i++) {
    circles.push(Circle((Math.random() * (canvas.width - 40)) + 20, (Math.random() * (canvas.height - 40)) + 20, 20));
    ctx.fill(circles[i], "nonzero");
    ctx.stroke(circles[i], "nonzero");
  }
}

function clickHandler(e) {
  var r = canvas.getBoundingClientRect(),
    x = e.clientX - r.left,
    y = e.clientY - r.top,
    i;

  for (i = circles.length - 1; i >= 0; --i) {
    console.log(i);
    if (ctx.isPointInPath(circles[i], x, y, 'nonzero')) {
      circles.splice(i, 1);
    }
  }

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (i = 0; i < circles.length; i++) {
    ctx.fill(circles[i], "nonzero")
    ctx.stroke(circles[i], "nonzero");
  }
}
canvas.addEventListener('click', clickHandler, false);
init();

【讨论】：