캔버스에서 원을 그리는 방법, 컨테이너를 올렸을 때 원의 테두리가 몇 줄로 늘어나거나 제안이 생깁니 까?

Question

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

"단순한"캔버스 버전의 jQuery 예제를 만들려고합니다. 컨테이너를 가져 가면 절대적으로 위치한 원의 경계선이 2px에서 6px로 확장됩니다. Canvas가 훨씬 더 부드럽고 ie9에서 작동하는 반면 css3 전환은 ie10 (caniuse.com)까지 작동하지 않습니다. 누구든지 올바른 방향으로 나를 가리킬 수 있습니까? 또는 내가 저지하려고 시도 할 수있는 다소 간단한 예제로 인도합니까? 또는 이와 비슷한 것을 만드는 데 어떤 도움을 주시겠습니까? 어떤 도움이라도 대단히 감사하겠습니다.

저는 Raphael을 사용하여 애니메이션 작업을 할 때 모든 것이 부드럽고 매끄럽게 만들어 지도록 조사했지만 그와 같은 작은 효과에 대해서는 무게가 큽니다.

Jquery에는 애니메이션을 적용하는 데 몇 가지 문제가 있으며 제 예제에는 픽셀이 약간 보입니다. 필자는 필자의 예제를 반드시 고치려고하지 않고있다. (모든 애니메이션을 한 번에하지 않으면, 지금하고있는 일 대신에, 그렇게 나쁘지는 않다.) Canvas는 원형 원과 애니메이션 만하는 것처럼 보인다. 너무 매끄럽게 보입니다. 테두리가 커지면 탄력 효과를 내기 위해 노력하지만 가능한 경우 축소하지 않습니다. 캔버스를 사용하는 것이 얼마나 어려운지 또는 다른 방법이 제안 될지 모르겠습니다. 정말 고맙습니다.

Answer 1

두 가지. 첫 번째 jQuery는 약식 애니메이션 값을 완벽하게 지원하지 않습니다. 따라서 "borderWidth"를 애니메이션 할 때는 개별적으로 4면을 애니메이션 처리해야합니다. (Source).

약식 CSS 속성 (예 : 여백, 배경, 테두리)은 이 지원되지 않습니다. 예를 들어, 렌더링 된 여백을 검색하려는 경우 은 $ (elem) .css ('marginTop') 및 $ (elem) .css ('marginRight')를 사용하므로 이 켜집니다.

둘째로, 나는 position에 대해 margin을 사용합니다.

그런데 국경 애니메이션이있는 둥근 요소에 대한 내 솔루션 인 내 old question을 확인하십시오. 원을 그릴 필요가 없기 때문에 더 필요한 것일 수도 있습니다. 거기에 더 자세한 설명이 있습니다.

올바른 효과를 얻으려면 update fiddle을 확인하십시오.

행운을 빈다.