Klicken Sie in unregelmäßigen Formen in HTML5 -Leinwand klicken ⇐ Jquery

[Anonymous]

Ich bin neu, indem ich Leinwand verwendete und ein einfaches Skript erstellt habe, um unregelmäßige Polygone in einer Leinwand zu zeichnen, die die Koordinaten kennen. Jetzt muss ich erkennen, ob ein Benutzer auf eine dieser Formen klickt und welches (jedes Objekt hat eine ID). Sie können mein Skript hier funktionieren. < /P>

Code: Select all

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var objetos = [];

// First Shape
objetos.push( {
id:'First',
coordinates: {
p1: {
x: 30,
y: 10
},
p2: {
x: 50,
y: 50
},
p3: {
x: 90,
y: 90
},
p4: {
x: 50,
y: 90
},
}
});

// Second Shape
objetos.push( {
id:'Two',
coordinates: {
p1: {
x: 150,
y: 20
},
p2: {
x: 90,
y: 50
},
p3: {
x: 90,
y: 30
},
}
});

// 3th Shape
objetos.push( {
id:'Shape',
coordinates: {
p1: {
x: 150,
y: 120
},
p2: {
x: 160,
y: 120
},
p3: {
x: 160,
y: 50
},
p4: {
x: 150,
y: 50
},
}
});

// Read each object
for (var i in objetos){
// Draw rhe shapes
ctx.beginPath();
var num = 0;
for (var j in objetos[i].coordinates){

if(num==0){
ctx.moveTo(objetos[i].coordinates[j]['x'], objetos[i].coordinates[j]['y']);
}else{
ctx.lineTo(objetos[i].coordinates[j]['x'], objetos[i].coordinates[j]['y']);
}
num++;
}
ctx.closePath();
ctx.lineWidth = 2;
ctx.fillStyle = '#8ED6FF';
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.stroke();
}

HINWEIS: Ein Cursorzeiger auf schweber wäre geschätzt. =)
Bearbeiten: Hinweis Ich verwende unregelmäßige Formen ohne vordefinierte Anzahl von Punkten. Einige Skripte (wie die auf Seiten, die als "mögliche Duplikation" verknüpft sind) unter Verwendung von Kreisen oder regulären Polygonen (eine bestimmte Anzahl von Seiten mit derselben Länge lösen mein Problem nicht).