Question

我有以下粒子脚本（从网上找到并编辑！）： http://jsfiddle.net/neuroflux/hSkFX/1/

我想知道让每个粒子“可点击”的最简单方法是什么？

据我所知，这些不是元素，而是x / y /半径点。

您认为最简单的方法是什么？

干杯！

[edit] 此问题与点击区域不点击事件有关....

Answer 1

无法真正知道您单击了画布中的元素。您所知道的是用户在画布对象上单击的x / y位置。您可以采取x / y位置并找出是否存在某些东西。另一种选择是检查那里的像素颜色，看它是否有颜色。

Answer 2

我发现本教程特别有用！ http://simonsarris.com/blog/510-making-html5-canvas-useful 这是您需要的相关部分：

// Determine if a point is inside the shape's bounds
    Shape.prototype.contains = function(mx, my) {
// All we have to do is make sure the Mouse X,Y fall in the area between
// the shape's X and (X + Height) and its Y and (Y + Height)
    return  (this.x <= mx) && (this.x + this.w >= mx) &&
          (this.y <= my) && (this.y + this.h >= my);
    }

您需要对Circle（）对象实现.contains函数，但是您必须通过比较光标位置与圆心的距离与圆半径来更改方法，如果更小则返回一个

是否可以使我的粒子可点击？

2 个答案: