Как в конвасе можно выделить сектор и к нему добавить обработчик событий, те чтобы при наведении сектор уменьшался.
Я сделал так, но там обработчик на теге канвасе, а надо на секторе
window.onload = main;
function main()
{
function Circle(ctx, w, h, datalist, radius)
{
var centerx = w / 2;
var centery = h / 2;
var total = 0;
for(x=0; x < datalist.length; x++) { total += datalist[x]; }
var lastend=0;
var offset = Math.PI / 2;
for(x=0; x < datalist.length; x++)
{
var thispart = datalist[x];
ctx.beginPath();
ctx.fillStyle = colist[x];
ctx.moveTo(centerx,centery);
var arcsector = Math.PI * (2 * thispart / total);
ctx.arc(centerx, centery, radius[x], lastend - offset, lastend + arcsector - offset, false);
ctx.lineTo(centerx, centery);
ctx.fill();
ctx.closePath();
lastend += arcsector;
}
}
var h=500;
var radius = new Array(h / 2 ,h / 2 ,h / 2 );
var datalist= new Array(120,120,120);
var colist = new Array('red', 'green', 'yellow');
var canvas = document.getElementById("myCanvas1");
var ctx = canvas.getContext('2d');
Circle(ctx, canvas.width, canvas.height, datalist, radius);
var id;
function draw(event) {
event = event || window.event;
ctx.clearRect(0, 0, canvas.width, canvas.height);
radius[0]-=5;
id=setTimeout(draw, 50);
if(radius[0]<40)
{
clearTimeout(id);
}
x= (event.layerX == undefined ? event.offsetX : event.layerX);
y= (event.layerY == undefined ? event.offsetY : event.layerY);
Circle(ctx, canvas.width, canvas.height, datalist, radius);
}
canvas.addEventListener('mouseover', draw, false);
}
