キャンバス内の画像に対してピクセル精度のヒット検出？

Question

私は基本的な等角写像をいくつかのスプライトがHTMLキャンバスのマップにロードされています。

私はキャンバスをクリックして正確なピクセルレベルにすることができ、キャンバスでクリックしたものをJSワークアウトすることができますか？

ライブラリーなしでそれを行う方法もありますか？

Answer 1

Canvas APIにはisPointInPath(x, y)メソッドがあり、ポイント（x、y）が現在のパス（またはその上）にあるかどうかを判断できます。

キャンバスに既に多数の図形があり、どの図形がクリックされていてライブラリを使用したくないのかを知りたい場合は、その図形を表すオブジェクトのリストまたはマップを維持し、onclickそれを反復して何らかの計算を実行するイベントハンドラです。

このようなリストは

幸い

var shapeList = [ 
    {shape: "rect", x0: 100, y0: 100, x1: 200, y1: 150}, 
    {shape: "circle", x0: 400, y0: 400, r: 50}, 
    ... 
]; 

ようになり、あなたのためにこの仕事を行うことができますそこにライブラリがあります。たとえば、crafty.jsまたはlime.jsを確認できます。これらは、Canvasのゲーム開発に役立つライブラリです。

var circle = new Crafty.circle(0, 0, 10); 
console.log(circle.containsPoint(0, 0)); // true 
console.log(circle.containsPoint(50, 50)); // false