如何在画布中制作一个圆圈，当其容器悬停时，圆圈的边框会增加几个像素，或者建议？
http://jsfiddle.net/nicktheandroid/BcaW3/1/
我正在尝试创建我的 jQuery 示例的“简单”画布版本。当容器悬停在上方时，绝对定位圆的边框从 2 像素扩展到 6 像素。我发现 Canvas 更加平滑，并且可以在 ie9 中使用，而 css3 过渡直到 ie10 才可以使用 (caniuse.com)。有人能指出我正确的方向吗？或者引导我举一个我可以尝试剖析的简单例子？或者只是在创建这样的东西时给我任何帮助？非常感谢任何帮助。
我研究过使用 Raphael 来使动画制作时一切都变得美好而流畅，但对于如此小的效果来说，这是一个很大的重量。
Jquery 在动画方面存在一些问题，并且我的示例看起来有点像素化。我并不是想一定要修复我的示例（除非它一次完成了所有动画，而不是现在正在做的事情，而且它看起来并没有那么糟糕），Canvas 看起来像它做了很好的圆形，并且动画只是看起来顺利多了。我还试图在边界增大时产生弹性效果，但在边界缩小时不产生弹性效果（如果可能）。我不知道这对于 Canvas 来说有多难，也不知道是否会建议其他方法。太感谢了。
http://jsfiddle.net/nicktheandroid/BcaW3/1/
I'm trying to create a "simple" canvas version of my jQuery example. When the container is hovered over, the absolutely positioned circle's border expands from 2px to 6px. I've seen that Canvas is a lot smoother, and it works in ie9, whereas css3 transitions don't work until ie10 (caniuse.com). Can anyone point me in the right direction? or lead me to a somewhat simple example that I could try to discect? or just give me any kind of help in creating something like this? ANY help is greatly appreciated.
I've looked into using Raphael to make it all nice and smooth when animating, but that's a ton of weight for such a small effect.
Jquery has some problems animating, and my example lookes a little pixelated. I'm not trying to necessarily fix my example(unless it did all the animations at once, instead of what it's doing right now, and it didn't look so bad), Canvas looks like it does nice round circles and the animation just seems so much smoother. I'm also trying to produce an elastic effect when the border grows, but not when it shrinks(if possible). I don't know how hard this is to do with Canvas or if another way would be suggested. Thank you SO much.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有两件事。首先 jQuery 不完全支持动画速记值。因此，当您为“borderWidth”设置动画时，它需要分别为 4 个边设置动画（来源）。
其次，我将在元素的
position上使用margin。顺便说一下，请查看我的老问题，了解圆形元素的另一种解决方案有边框动画，也许这更适合您需要的东西（因为您不需要绘制圆圈）。那里有更详细的解释。
检查您的更新小提琴以获得正确的效果。
祝你好运。
Two things. First jQuery does not fully support animating shorthand values. So when you animate your "borderWidth", it needs to animate 4 sides individually (Source).
Second, I'd use the
marginover thepositionof the element.By the way, check out my old question for another solution to a rounded element that has a border animation, maybe that suits what you need more (since you need not draw the circle). And there's a more detailed explanation there.
Check out your update fiddle for the right effect.
Good luck.