用户单击后，删除在html5画布中绘制的圆圈 [英] Remove circle drawn in html5 canvas once user clicks on it

问题描述

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

I wrote a code that generates randomly 60 circles in a canvas, how do I handle that an event onclick circle pressed disappear and after is generated another? which may be the best solution? the code is:

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);
}

推荐答案

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

The best solution for this IMO would be to use svg, which will create SVGElements, each one with it's own events interface.

现在，用画布来完成它并不是没有可能，但是正如@VickyGonsalves所提到的，您必须存储所有圆的位置，计算其超坐标并检查是否点击事件的clientX和clientY都位于其中之一内，然后重画整个内容而不会被单击。

Now, it's not impossible to do it with a canvas, but as mentioned by @VickyGonsalves, you'll have to store all circles positions, calculate their superficy and check if the click event's clientX and clientY are inside one of them, then redraw the whole without the ones being clicked.

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

However, the new Path2D interface, allows to store paths and reuse them later, or use them into context's methods such as fill() and isPointInPath().

所以这是使用 Path2d（）构造函数的简单解决方案，该构造函数
。

So here is a simple solution using the Path2d() constructor, which 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();

这篇关于用户单击后，删除在html5画布中绘制的圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！