是否可以让我的粒子可点击？答案

【问题标题】：Is it possible to make my particles clickable?是否可以让我的粒子可点击？
【发布时间】：2012-08-23 12:30:03
【问题描述】：

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

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

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

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

干杯！

[edit]这个问题是关于点击区域不是点击事件......

【问题讨论】：

Click on given element in canvas 的可能重复项；另见Click area on sprite in canvas
我认为您必须捕获对<canvas> 的点击，然后查看点击的坐标是否是一个或多个粒子的位置。
不不不，这不是关于点击事件...而是关于获取粒子的点击区域...
只有在他们不是初级的时候，我想 (en.wikipedia.org/wiki/Elementary_particle)
点击区域和点击量不相关怎么办？这是同样的事情。一个粒子有一个 x 直径，它的中心在某个位置。创建粒子或编辑时，将对其的引用存储在数组中以供点击查找。

标签： javascript canvas particles

【解决方案1】：

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

【讨论】：

【解决方案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 函数，但是您必须通过将光标位置与圆心的距离与圆半径进行比较来更改方法，如果更小则返回一个.

【讨论】：