HTML, CSS 및 JavaScript로 아크 효과 늘리기

Question

이 효과의 이름이 있는지는 모르지만 기본적으로 증가하고 결국 원이되는 호입니다.

이 이미지가 당신에게 좋은 아이디어가되기를 바랍니다.

기본적으로 나는 길이가 같은 JavaScript를 통해 변경할 수있는 원호를 만들어야합니다 (동일한 반지름을 유지). divs와 border radius (넓이, 높이, 왼쪽, 위쪽, 경계선 반경)를 가지고 실제로 이것을 해보고 싶습니다.

따라서, (1)에서와 같이 90도 호를 얻으려면 다음을 사용하십시오. .이 : (1), 다음 (2), (3), 마침내 완전한 원이 내가 가지고있는 문제 중 하나는 것입니다 그러나

-moz-border-radius: 50%; 
-webkit-border-radius: 50%; 
border-radius: 50%; 

, 아크는 하나의 픽셀이 다음이 될 것이다 증가와 함께 시작하는 것 경계는 단단한 단색 경계가 아니라 다음과 같이됩니다.

경계선의 색 강도가 호의 끝까지 느슨해지며 해결 방법을 모르는 첫 번째 문제가됩니다. 두 번째로, 크기, 위치 및 경계 반경을 사용하여 지정된 크기와 반경의 호를 만드는 데 도움이되는 알고리즘을 알고 있습니까?

Answer 1

캔버스와 간단한 JS를 사용하면 쉽게 할 수 있습니다.

JS

var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 
//ctx.arc(100,75,50,0,2*Math.PI); //Full circle 
//ctx.arc(100,75,50,0,1.5*Math.PI); //3/4 circle 
//ctx.arc(100,75,50,0,Math.PI); //Half circle 
ctx.arc(100,75,50,0,0.5*Math.PI); //1/4 circle 
ctx.stroke(); 

HTML

<canvas id="canvas"></canvas> 

JSFiddle : .ARC위한 http://jsfiddle.net/r3CSS/

구문은 다음 .ARC는 (각도 시작, 종료, 반경 Y 좌표, X 좌표 각도 [, 반 시계 방향]);