댓글 : 캔버스에 엘립을 그리는 것은 매우 일반적인 요구 사항이지만 대부분의 브라우저는 아직이 방법을 구현하지 않았으므로 종종 아크 또는 ARCTO 메소드를 사용하여 스케일 변형을 결합하여 엘립을 그리십시오. 관심있는 친구들은 당신을 도울 수 있기를 바라면서 배울 수 있습니다.
캔버스에서 타원을 그리는 것은 매우 일반적인 요구 사항입니다. 새로운 HTML Canvas 2D ContextW3C 드래프트는 엘립을 그리기위한 타원 방법을 추가했지만 대부분의 브라우저는 아직이 방법을 구현하지 않았으므로 스케일 변형과 결합하여 Arc 또는 Arcto 메소드를 사용하여 타원을 그리는 것이 필요합니다.
샘플 코드 :
<canvas> </canvas>
<cript>
var ctx = documentQuerySelector ( 'canvas') getContext ( '2d');
ctxlinewidth = "10";
CTXScale (1,2);
ctxarc (150,150,100,0, mathpi*2, false);
ctxStroke ();
</스크립트>
선이 두께가 고르지 않기 때문에 약간 잘못되었고 스트로크는 또한 규모에 의해 영향을받습니다.
이 문제를 해결하려면 약간의 속임수가 필요합니다.
샘플 코드 :
[암호]
<canvas> </canvas>
<cript>
var ctx = documentQuerySelector ( 'canvas') getContext ( '2d');
ctxlinewidth = "10";
ctxsave ();
CTXScale (1,2);
ctxarc (150,150,100,0, mathpi*2, false);
ctxrestore ();
ctxStroke ();
</스크립트>
[/암호]
이제 완벽합니다.
비결은 먼저 캔버스 상태를 저장 한 다음 경로 명령을 스케일하고 호출 한 다음 캔버스 상태를 복원 한 다음 그려야합니다.
핵심 요점은 먼저 저장 한 다음 확대 한 다음 먼저 복원 한 다음 스트로크하는 것입니다.