我想用一个简单的形状使用路径机制绘制
html5画布元素的动画.当鼠标悬停在它上面时,我想放大它,使它更不透明并改变颜色.我可以使用jQuery的animate()函数吗？什么是最好的方法？ canvas有没有机制来做这种动画？
解决方法
不幸的是你想要做的事情使用canvas非常困难(不再是这种情况 – 请参阅下面的UPDATE),因为一旦你在画布上绘制一个路径,它只是像素,所以你不能像使用DOM一样将事件处理程序附加到它上面.
幸运的是,如果使用SVG代替画布,你可以使用它,因为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.
这就是你如何制作一个红色圆圈,它会在鼠标悬停时慢慢将颜色变为黄色：
// 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,它使得一个圆圈和鼠标悬停完全符合你的要求 – 放大它,使它更不透明并改变颜色.
另见this demo我为this answer写的关于Raphaël的文章.
UPDATE
当我最初发布这个答案时,我写道,你要求的东西使用canvas非常困难,因为你必须维护一些画布中不存在的对象层次结构,就像它在SVG或VML中一样.它仍然是真的,但现在有些库可以为你做“非常困难”的部分,例如
EaselJS,
KineticJS,
Paper.js或
Fabric.js和其他一些人(请参阅由Fabric.js的作者维护的这个comparison of canvas libraries以获取更多信息).