在canvas对象上使用jQuery动画
我想用一个简单的形状使用路径机制绘制html5canvas元素的动画。 当鼠标hover在它上面时，我想放大它，使它更不透明并改变颜色。 我可以使用jQuery的animate（）函数吗？ 什么是最好的方法？ canvas是否有机制来执行此类动画？
不幸的是，使用canvas时你想要做的事情会非常困难（不再是这种情况 – 请参阅下面的UPDATE），因为一旦你在canvas上画一条路径，它只是像素，所以你不能像使用DOM一样将事件处理程序附加到它上面。
幸运的是，你可以使用SVG代替canvas，因为SVG中的所有形状都是DOM节点，就像HTML中的div和span一样。
不幸的是，IE不支持SVG。
幸运的是，在IE上你可以使用VML而不是SVG。
遗憾的是，您无法使用jQuery轻松地为SVG和VML对象制作动画。
幸运的是Raphaël是一个JavaScript库，其API受到jQuery的启发，为您完成所有这些工作。 它在IE上使用VML，在其他bowsers上使用SVG。 它适用于Firefox 3.0 +，Safari 3.0 +，Chrome 5.0 +，Opera 9.5+和Internet Explorer 6.0+。
这就是你如何制作一个红色圆圈，它会在鼠标hover时慢慢将颜色变为黄色：
// 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 ，它使得一个圆圈和鼠标hover完全符合你的要求 – 放大它，使它更不透明并改变颜色。
另请参阅我为此回答有关Raphaël的演示 。
UPDATE
当我最初发布这个答案时，我写道，你要求的东西使用canvas非常困难，因为你必须维护一些canvas中不存在的对象层次结构，就像它在SVG或VML中一样。 它仍然是正确的，但现在有些库可以为你做“非常困难”的部分，例如EaselJS ， KineticJS ， Paper.js或Fabric.js以及其他一些（参见由作者维护的canvas库的比较） Fabric.js更多）。
在这个页面上谷歌使用了一些动画canvas图标。 http://www.google.com/chromeos/features.html
当你深入研究代码时，你会发现他们使用的是JS Tweener。 http://coderepos.org/share/wiki/JSTweener
我认为如果google选择它，它比raphaelJS更可靠;）。 但是，Canvas动画代码非常复杂。 我几乎不明白发生了什么事。