jquery - 如何在 Canvas 中制作一个圆圈，当它的容器悬停时，圆圈的边框会增加几个px，或者建议？

Question

http://jsfiddle.net/nicktheandroid/BcaW3/1/

我正在尝试创建我的 jQuery 示例的“简单” Canvas 版本。当容器悬停时，绝对定位的圆的边框从 2px 扩展到 6px。我已经看到 Canvas 更流畅，它在 ie9 中工作，而 css3 过渡在 ie10 (caniuse.com) 之前不工作。谁能指出我正确的方向？还是引导我举一个我可以尝试辨别的简单例子？或者只是给我任何帮助来创造这样的东西？非常感谢任何帮助。

我研究过使用 Raphael 在制作动画时让它变得漂亮和流畅，但对于这么小的效果来说，这是一个很大的负担。

Jquery 在动画方面存在一些问题，我的示例看起来有点像素化。我并不是要修复我的示例(除非它一次完成所有动画，而不是它现在正在做的，而且它看起来并不那么糟糕)，Canvas 看起来它做的圆圈很好，动画只是看起来顺畅多了。我还试图在边界增长时产生 flex 效果，但在边界缩小时(如果可能)则不会。我不知道这对 Canvas 有多难，或者是否会建议其他方法。非常感谢。

Answer 1

两件事。首先 jQuery 不完全支持动画速记值。因此，当您为“borderWidth”设置动画时，它需要分别为 4 个边设置动画 (Source) .

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

其次，我将在元素的 position 上使用 margin。

顺便看看我的old question对于具有边框动画的圆形元素的另一种解决方案，也许更适合您的需求(因为您不需要绘制圆圈)。那里有更详细的解释。

查看您的 update fiddle以获得正确的效果。

祝你好运。