问在画布对象上使用jQuery动画

EN

不幸的是，使用canvas (不再是这种情况--参见下面的更新)会非常困难，因为一旦您在canvas上绘制了一个路径，它只是一个像素，所以您不能像使用DOM那样将事件处理程序附加到它上。

幸运的是，如果您使用SVG而不是canvas，就可以做到这一点，因为SVG中的所有形状都是DOM节点，就像HTML中的div和span一样。

不幸的是，IE不支持SVG。

幸运的是，在IE上你可以使用VML而不是SVG。

不幸的是，您不能使用jQuery轻松地对SVG和VML对象进行动画处理。

幸运的是，有Raphaël，一个受jQuery启发很大的JavaScript库，它可以为你完成所有的工作。它在IE上使用VML，在其他浏览器上使用SVG。它适用于火狐3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+和It 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);
    }
);

就是这样--参见。

看看这个更复杂的，它做了一个圆圈，鼠标悬停就能做你想做的事情-放大它，使它更不透明，并改变颜色。

另请参阅我为this answer编写的关于Raphaël的this demo。

更新

当我最初发布这个答案时，我写道，使用canvas很难做到你所要求的，因为你必须维护一些在canvas中不存在的对象层次结构，就像在SVG或VML中一样。这仍然是正确的，但现在有一些库可以为您完成“非常困难”的部分，例如EaselJS、KineticJS、Paper.js或Fabric.js等(有关更多信息，请参阅由Fabric.js的作者维护的这个comparison of canvas libraries )。

在这个页面上，谷歌使用了一些动画画布图标。http://www.google.com/chromeos/features.html

当你深入研究代码时，你会发现他们使用了JS Tweener。http://coderepos.org/share/wiki/JSTweener

我认为如果谷歌选择它，它比raphaelJS更可靠;)。不过，Canvas动画代码非常复杂。我几乎不明白发生了什么。