최종 렌더링1. 변수 정의
반경을 정의하고, 링의 두께를 정의하고, 원의 중심 위치를 정의하고, 기본 채우기 색상을 정의합니다.
let radius = 75let Thickness= 10let innerRadius = radius - Thicknesslet x = 75let y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = #f2d7d7; 2. 첫 번째 호를 그립니다. ctx.beginPath();ctx.arc(x, y, 반경, Math.PI * 1.5, Math.PI)
경로 생성의 첫 번째 단계인 BeginPath() 메서드에 주의하세요. 기본적으로 경로는 모두 목록에 있는 많은 하위 경로로 구성되며 모든 하위 경로(선, 호 등)가 모양을 형성합니다. 이 메서드가 호출될 때마다 목록이 지워지고 재설정된 다음 새 그래프를 다시 그릴 수 있습니다.
즉, 이 메서드를 사용하면 캔버스 이미지를 그룹화하고 새 그래픽을 그릴 수 있습니다. 이 메서드를 호출하지 않으면 새 그래픽이 이전 그래픽에 연결됩니다.
3. 첫 번째 연결 그리기ctx.quadraticCurveTo((x - innerRadius) - 두께 / 2, y - 두께, x - innerRadius, y)
연결은 2차 베지어 곡선을 사용하여 그려집니다. Canvas의 QuadraticCurveTo(cp1x, cp1y, x, y) 메서드는 첫 번째와 두 번째 매개변수가 제어점이고 세 번째와 네 번째 매개변수가 끝입니다. 공식 문서
제어점과 끝점만 파악하면 호를 그릴 수 있습니다.
4. 두 번째 호를 그립니다.ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
메서드 뒤의 마지막 매개변수에 주의하세요. true로 설정하면 시계 반대 방향으로 그려집니다(기본값은 시계 방향).
5. 두 번째 연결선 그리기ctx.quadraticCurveTo(y - 두께, (x - innerRadius) - 두께 / 2, x, y - innerRadius - 두께)
이 단계는 실제로 세 번째 단계와 크게 다르지 않습니다. 매개변수 위치만 변경했습니다.
6. 충전ctx.fill();
이쯤 되면 간단한 닫히지 않은 링이 완성됩니다.
두 번째 진행률 표시줄 링 그리기
7. 초기화ctx.beginPath();ctx.fillStyle = #e87c7c;
BeginPath는 새 그래픽을 그리는 것을 의미합니다. 이 메서드가 호출되지 않으면 나중에 그려진 그래픽이 이전에 그려진 그래픽에 연결됩니다.
8. 두 번째 진행률 표시줄 링을 그립니다.ctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + innerRadius) + 두께 / 2, y + 두께, x + innerRadius, y)ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)ctx.quadraticCurveTo(y - 두께, (x - innerRadius) - 두께 / 2, x, y - innerRadius - 두께)ctx.fill();
그리는 방법은 첫 번째 원과 완전히 동일하므로 반복할 필요 없이 원의 호만 다릅니다.
9. 캔버스 회전변환: 회전(-135deg);
CSS 회전이 더 편리하고 각도 계산도 절약되므로 CSS 변환을 사용하여 회전합니다. 물론 Canvas는 회전 방법도 제공합니다.
완전한 코드
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,initial-scale=1.0> <meta http-equiv=X-UA -호환되는 콘텐츠=ie=edge> <title>캔버스</title> <style> .ring { 너비: 150px; 높이: 150px; flex-items: center; flex-direction: 열; 위치: 상대; } #tutorial { 변환: 너비: 150px; } .fraction: 절대; 글꼴 크기: 30px; 글꼴 두께: 굵게: 빨간색 } .small { 글꼴 크기: 12px; 글꼴 무게: 라이터; } .title { 색상: 빨간색; 하단: 0; 위치: 절대 } </style></head><body> <div class=ring> <canvas id=tutorial width=150 height= 150></canvas> <span class=fraction>100 <span class=small>포인트</span> </span> <span class=title>서비스 포인트</span> </div> <script> let radius = 75 let 두께 = 10 let innerRadius = 반경 - 두께 let x = 75 let y = 75 var canvas = document.getElementById('tutorial') var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(x, y, 반경, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - 두께/2 , y - 두께, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - 두께, (x - innerRadius) - 두께 / 2, x, y - innerRadius - 두께) ctx.fill(); ctx.beginPath(); ctx.fillStyle = #e87c7c; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + 두께 / 2, y + 두께, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - 두께, (x - innerRadius) - 두께 / 2, x, y - innerRadius - 두께) ctx.fill(); </script></body></html>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.