一旦用户点击它，删除 html5 canvas 中绘制的圆圈

Question

我写了一个代码，在 canvas 中随机生成 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);
}

Answer 1

此 IMO 的最佳解决方案是使用 svg，它将创建 SVGElement，每个 SVGElement 都有自己的事件接口。

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

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

所以这是一个使用 Path2d() 构造函数的简单解决方案，支持既不是 IE，也不是 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();

一旦用户点击它，删除 html5 canvas 中绘制的圆圈

Remove circle drawn in html5 canvas once user clicks on it

javascript

arrays

canvas

onclick

html5-canvas