html5 캔버스 그리기 튜토리얼(9) - canvas_html5 튜토리얼 기술로 직사각형과 원 그리기

이번 글에서는 캔버스에 직사각형과 원을 그리는 방법에 대해 설명합니다. 기본적인 그래픽입니다. 물론 그보다 더 기본적인 그래픽이 있지만 캔버스에서는 다른 방법을 사용하지 않고 직사각형과 원만 그릴 수 있습니다.

캔버스는 직사각형을 그립니다
1, fillRect 및 스트로크Rect
fillRect는 직사각형을 직접 채울 수 있으며 채우기 스타일은 현재 설정한 스타일입니다. 마찬가지입니다. 여기서 시작점은 직사각형의 왼쪽 상단 모서리를 나타냅니다.
우리는 보통 간단한 일을 할 때 사용하는데, 간단한 일만 할 수 있습니다. 왜? 그들이 그린 그래픽에는 '경로'가 없기 때문에 그냥 그대로 나왔다.
예를 들어 먼저 fillRect로 직사각형을 채운 다음 직사각형을 스트로크하려는 경우, 스트로크()를 사용하면 아무런 효과가 없습니다. 직사각형은 있지만 경로가 없기 때문입니다.
이 직사각형을 필사적으로 획을 긋고 싶다면, 스트로크Rect()를 사용하여 동일한 위치에서 직사각형을 획할 수 있습니다. 그러나 실제로는 독립적이며 위치가 겹치는 것뿐입니다.

코드 복사코드는 다음과 같습니다.

ctx.fillRect(200,100, 50,40 );
ctx.strokRect(200,100,50,40);

채우기와 획이 모두 포함된 직사각형을 원한다면 fillRect와 스트로크Rect를 동시에 사용하는 것이 좋습니다. 번거롭다 . 그래서 이런 경우에는 보통 다음과 같은 방법을 사용합니다.


코드 복사

코드는 다음과 같습니다.

ctx.lect(300,100, 50,40 ); ctx.strok() ctx.fill();

이렇게 하면 어떤 이점이 있나요? 이전 기사에서 채우기 또는 스트로크 작업은 많은 리소스를 소비하므로 한 번에 수백 개의 경로(예: 루프)를 그린 다음 이를 스트로크하거나 채워야 하는 경우가 많다고 언급했습니다. 이때, ect를 사용하여 경로를 그리고 끝부분을 채우면 fillRect 및 strokeRec가 매번 채우기 또는 스트로크를 수행해야 하는 문제를 피할 수 있습니다.


3, lineTo

물론 4 lineTo를 사용하여 제 선 그리기 튜토리얼처럼 직사각형을 그릴 수도 있습니다. 하지만 꼭 그럴 필요는 없습니다. 자세한 내용은 해당 기사를 참조하세요.


캔버스는 원을 그린다사실 캔버스에는 원을 직접 그릴 수 있는 실제 기능이 없습니다. 360도 호, 그것은 원처럼 보입니다.
호를 그리는 캔버스의 기능, 즉 원을 그리는 데 사용하는 기능에 대해 설명한 적이 있습니다.



코드 복사

코드는 다음과 같습니다.

ctx.arc(300 25,100 20,20,0,Math.PI*2) ctx.Stroke() ctx.fill();

이 호는 ect와 동일하며 경로도 그리며 채우기나 획은 나중에 완료해야 합니다.
그러나 원의 위치 판단은 직사각형의 위치 판단과 다르다는 점에 유의해야 합니다. 직사각형의 왼쪽 위 모서리를 시작점으로 사용하여 위치를 결정하지만 일반적으로 원의 중심을 사용하여 원의 위치를 ​​결정합니다.
수평 및 수직 중심의 직사각형과 원 세트를 그리려면 직사각형의 시작점을 원의 시작점으로 간주하지 않아야 합니다. 원의 시작점은 원의 중심입니다. 원!

잊으십시오. 정렬된 원과 직사각형의 경우 원 중심 좌표 = 직사각형 좌표와 직사각형 너비 및 높이의 절반입니다.
즉, 원 중심 x = 직사각형 x 직사각형 너비/2, 원 y = 직사각형 y 직사각형 높이/2입니다. 이런 식으로 그들은 완전히 정렬됩니다.
원호는 원을 직접 그리는 방법만큼 사용하기 쉽지는 않지만, 원을 직접 그리는 방법은 원의 중심 좌표와 반지름 3개의 매개변수만 있으면 됩니다. 그러나 호는 원을 그릴 수 있습니다. 원뿐만 아니라 반원 등도 그릴 수 있어 기능이 더욱 강력해지고 활용이 가능해졌습니다.
원이 있으니 타원도 있어야 하는데, 타원은커녕 캔버스에 원을 그리는 정규 함수조차 없습니다. 따라서 타원 그리기는 다른 방법으로 시뮬레이션해야 합니다. 이는 더 복잡하므로 나중에 다루겠습니다.