html5 캔버스에 타원을 그리는 팁과 선 두께를 균일하게 유지하는 팁_html5 튜토리얼 팁

캔버스에서 타원을 그리는 것은 매우 일반적인 요구 사항입니다. 상대적으로 새로운 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]

이제 균일하고 완벽해졌어요. 비결은 먼저 캔버스 상태를 저장한 다음 확대/축소하고 경로 명령을 호출한 다음 복원하여 캔버스 상태를 복원한 다음 스트로크하여 그리는 것입니다.
먼저 저장한 다음 크기를 조정하고 복원한 다음 스트로크하는 것이 핵심입니다.