캔버스에서 타원을 그리는 것은 매우 일반적인 요구 사항입니다. 상대적으로 새로운 HTML Canvas 2D Context W3C 초안에는 타원을 그리는 데 ellipse 메서드가 추가되었으므로 대부분의 브라우저에서는 아직 이 메서드를 구현하지 않았으므로 arc 또는 arcTo를 사용해야 합니다. . 방법은 크기 변형을 결합하여 타원을 그립니다.
샘플 코드:
<script> <br>var ctx = documentquerySelector('canvas')getContext('2d') <br>ctxlineWidth = "10"; <br>ctxscale(1,2) <br>ctxarc(150,150,100,0,MathPI*2,false) <br></script>
선 굵기가 균일하지 않고 획도 스케일의 영향을 받기 때문에 뭔가 잘못된 것 같습니다.
이 문제를 해결하려면 약간의 트릭이 필요합니다.
샘플 코드:
[코드]
<script> <br>var ctx = documentquerySelector('canvas')getContext('2d' ); <br>ctxlineWidth = "10"; <br>ctxscale(1,2); <br>ctxarc(150,150,100,0,MathPI*2,false); ; <br>ctxStroke() <br></script>
[/code]
이제 균일하고 완벽해졌어요.
비결은 먼저 캔버스 상태를 저장한 다음 확대/축소하고 경로 명령을 호출한 다음 복원하여 캔버스 상태를 복원한 다음 스트로크하여 그리는 것입니다.
먼저 저장한 다음 크기를 조정하고 복원한 다음 스트로크하는 것이 핵심입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
