К сожалению, то, что вы хотите сделать, было бы очень сложно с использованием canvas (больше не так - см. ОБНОВЛЕНИЕ ниже) , потому что, как только вы рисуете путь на холсте, это просто пиксели, поэтому вы не можете просто прикрепить событиеобработчики, как в DOM.
К счастью, вы можете сделать это, если вместо холста вы используете SVG , потому что все фигуры в SVG являются узлами DOM, точно так же, как div и span в HTML.
К сожалению, SVG не поддерживается в IE.
К счастью, в IE вы можете использовать VML вместо SVG.
К сожалению, вы не можете использоватьjQuery для простой анимации объектов SVG и VML.
К счастью, есть Raphaël , библиотека JavaScript с API, в значительной степени вдохновленная jQuery, которая делает все за вас.Он использует VML на IE и SVG на других баузерах.Он работает в Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.
Вот как вы можете сделать красный круг, который будет медленно менять цвет на желтый при наведении мыши:
// make a Raphael "paper" similarly to an HTML5 canvas:
var paper = Raphael(10, 10, 320, 240);
// make a circle on this paper:
var circle = paper.circle(100, 80, 20);
// change some attributes:
circle.attr({
fill: 'red'
});
// register mouse enter and mouse leave event handlers:
circle.hover(
function() {
circle.animate({
fill: 'yellow'
}, 300);
},
function() {
circle.animate({
fill: 'red'
}, 300);
}
);
И это все - см. DEMO .
См. Это сложнее DEMO это делает круг, а при наведении курсора мыши делает именно то, о чем вы просили - увеличьте его, сделайте его более непрозрачным и измените цвета.
См. также это демо , которое я написал для этот ответ о Рафаэле.
ОБНОВЛЕНИЕ
Когда я первоначально опубликовал этот ответ, я написал, что то, о чем вы просите, будет очень трудно сделать с помощью canvas, потому что у вас будетподдерживать некоторую иерархию объектов, которой нет на холсте, как в SVG или VML.Это все еще верно, но теперь есть библиотеки, которые могут выполнить «очень сложную» часть для вас, например, EaselJS , KineticJS , Paper.js или Fabric.js и некоторые другие (см. сравнение библиотек холста , поддерживаемых автором Fabric.js, для получения дополнительной информации).