<! DOCTYPE html로>
<HTML>
<head>
<메타 캐릭터 = "UTF-8">
<스타일 유형 = "텍스트 / CSS">
#myCanvas {
여백 : 0 자동;
디스플레이 : 블록;
}
</ 스타일>
</ head>
<body>
<캔버스 ID = "myCanvas"> 캔버스 어셈블리를 지원하지 않습니다 현재 브라우저 업그레이드하십시오! </ 캔버스>
<스크립트 유형 = "텍스트 / 자바 스크립트">
// 방법 1 : 동적 원을 호
VAR의 document.getElementById를 C = ( 'myCanvas');
var에 CTX = c.getContext ( '2D');
VAR의 mW의 c.width = = 300;
VAR MH = c.height = 300;
선폭 = 5였다
VAR의 R = mW의 / 2] // 중간 위치
VAR의 CR = R - 4 * 선폭 // 반경
VAR startAngle로부터 = - (2 * Math.PI로는) 시작 각도 //
var에 endAngle = startAngle로부터 + 2 * Math.PI로; // 끝 각도
VAR xAngle = * (인 Math.PI / 180) (1); // 각 오프셋 량
VAR의 fontSize는 = 35; // 폰트 크기
VAR tmpAngle = startAngle로부터; // 임시 변수 각도
기능을 렌더링 //
있었다 원 = 함수 () {
경우 (tmpAngle> = endAngle) {
반환;
} 다른 경우 (tmpAngle + xAngle> endAngle) {
tmpAngle = endAngle;
}그밖에{
tmpAngle + = xAngle;
}
ctx.clearRect (0, 0, mW, MH);
// 원
ctx.beginPath ();
ctx.lineWidth = 선폭;
ctx.strokeStyle = '#의 1c86d1';
ctx.arc (R, R, CR, startAngle로부터, tmpAngle);
ctx.stroke ();
ctx.closePath ();
// 쓰기
ctx.fillStyle = '#의 1d89d5';
ctx.font = fontSize는 + '픽셀 마이크로 소프트 Yahei';
ctx.textAlign 용 = '중심';
ctx.fillText (Math.round ((tmpAngle - startAngle로부터) / (endAngle - startAngle로부터) * 100)를 '%'+ R, R + fontSize는 / 2);
requestAnimationFrame (rander);
};
rander ();
</ script>
</ body>
</ HTML>