Moonlight,
Простым будет только метод для
выпуклых многоугольников.
<body style="padding: 0px; margin: 0px;">
<canvas id="canvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById( 'canvas' );
var ctx = canvas.getContext( '2d' );
var poly = [
{ x: 20, y: 50 },
{ x: 90, y: 10 },
{ x: 220, y: 60 },
{ x: 260, y: 180 },
{ x: 180, y: 280 },
{ x: 80, y: 220 }
];
function isPointInConvexPoly ( x, y, poly ) {
var i = 0, pt1, pt2 = poly[ poly.length - 1 ];
while ((
pt1 = pt2,
pt2 = poly[ i ],
( y - pt1.y ) * ( pt2.x - pt1.x ) > ( x - pt1.x ) * ( pt2.y - pt1.y )
) && ++i < poly.length ) {}
return i == poly.length;
}
function renderTest ( mouseX, mouseY ) {
ctx.clearRect( 0, 0, canvas.width, canvas.height );
ctx.lineWidth = 2;
ctx.fillStyle = isPointInConvexPoly( mouseX, mouseY, poly ) ? 'red' : 'blue';
ctx.beginPath();
ctx.moveTo( poly[0].x, poly[0].y );
for ( var i = 1; i < poly.length; i++ ) { ctx.lineTo( poly[i].x, poly[i].y ); }
ctx.fill();
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.moveTo( mouseX + 3, mouseY );
ctx.arc( mouseX, mouseY, 3, 0, Math.PI*2, false );
ctx.fill();
}
canvas.addEventListener( 'mousemove', function ( event ) {
renderTest( event.pageX, event.pageY );
}, false );
renderTest( -100, -100 );
</script>
</body>
А если брать вообще произвольные фигуры, то там все на порядок-два сложнее, я даже не собираюсь возиться с этим...
Смотрите код готовых библиотек, наверняка в том же libcanvas'е оно уже реализовано.