Question

我想在画布上绘制一个大圆圈，在大圆圈上绘制一些小圆圈，我想用鼠标点击处理那些小圆圈。通过点击那个小圆圈，我想从画布中删除它们。我怎么能这样做？

Answer 1

这是针对特定问题的特定问题的地方。听起来你没有对此做过任何研究。下次发布问题时，请务必查看what types of questions not to post。

尽管如此，你最好的选择可能是使用像EaselJS这样的库。

Answer 2

使用html5画布执行此操作的最简单方法是存储可点击对象的列表，然后对每个点击循环遍历所有对象，并查看鼠标是否在其绘制区域内。

$('#myCanvas').click(function (e) {
    //get the actual mouse x and y of the click location
    var mouseX = e.pageX - this.offsetLeft,
        mouseY = e.pageY - this.offsetTop;

    // loop through all of the circles
    for (var i = 0; i < circles.length; i++) {
        //if the x and y of the click are within the area of the circle
        if (mouseX < circles[i].right && mouseX > circles[i].left && mouseY > circles[i].top && mouseY < circles[i].bottom) {
            //show a message with the number of the circle
            alert ('clicked circle ' + (i + 1));
        }
    }
});

所以当我绘制圆圈时，我会将它们添加到var circles = []数组

http://jsfiddle.net/a97yv1n3/1/

如何在HTML画布上执行鼠标操作？

2 个答案: