이 기사는 캔버스에서 직사각형과 원을 그리는 방법에 대해 이야기하며 기본 그래픽에 속합니다. 물론 기본 그래픽에는 그 이상이 있지만 캔버스에는 사각형과 원 만 그리기 만 다른 시뮬레이션이 필요하지 않습니다.
캔버스는 사각형을 그립니다 1. FillRect 및 StrokerectFillRect는 직사각형을 직접 채울 수 있으며 충전 스타일은 현재 설정하는 스타일입니다. 마찬가지로, Strokerect는 직사각형을 직접 스트로크하는 것입니다
매개 변수는 일관성이 있습니다 (시작점 X 좌표, 시작점 y, 사각형 폭, 사각형 높이). 여기서 시작점은 사각형의 왼쪽 상단의 지점을 나타냅니다.
우리는 보통 그것들을 사용하여 간단한 일을하며 간단한 일만 할 수 있습니다. 왜? 그래픽이 그리는 단어에는 경로가 없기 때문에 직접 나왔습니다.
예를 들어, 먼저 충전물로 사각형을 채우는 경우 사각형을 치기를 원합니다. 스트로크 ()를 사용하는 경우 현재는 사각형이 있지만 경로는 없기 때문에 효과가 없습니다.
이 사각형을 뇌졸중하고 싶다면 Strokerect ()를 사용하여 같은 위치에서 사각형을 스트로크 할 수 있지만 실제로는 독립적이고 겹치는 위치입니다.
ctx.fillRect (200,100,50,40);
Ctx.Strokerect (200,100,50,40);
우리가 채워지고 쓰다듬어 사각형을 원한다면 의심 할 여지없이 충전제와 스트로커를 동시에 사용하는 것이 번거 롭습니다. 따라서이 경우 일반적으로 다음 방법을 사용합니다.
2, rect RECT의 매개 변수는 FillRect 및 Strokerect와 다르지 않습니다. 차이점은 그들이 경로를 그릴 뿐이며 뇌졸중을 완성하거나 나중에 자신을 채워야한다는 것입니다.ctx.rect (300,100,50,40);
ctx.stroke ()
ctx.fill ();
이 작업의 이점은 무엇입니까? 이전 기사에서, 나는 충전 또는 뇌졸중이 많은 자원을 소비한다고 언급 했으므로, 우리는 종종 (루프와 같은) 한 번에 수백 개의 경로를 그린 다음 뇌졸중 또는 채우는 것이 필요하다고 언급했습니다. 이 시점에서 rect를 사용하여 경로를 그리고 다시 채우면 매번 FillingRect 및 Strokerec 충전 또는 스트로크의 문제를 피하십시오.
3. Lineto물론, 4 Linesto는 드로잉 라인에 대한 내 튜토리얼과 같은 사각형을 그리기 할 수도 있습니다. 그러나 이것은 불필요합니다. 자세한 내용은 해당 기사를 확인하십시오.
캔버스 드로우 원 하늘에는 눈이 없습니다. 실제로 캔버스에는 원을 직접 그릴 수있는 실제 기능이 없습니다. 그가 그리는 것은 실제로 360도 아크이며, 이는 원처럼 보입니다.우리는 캔버스가 이전에 아크를 그리는 기능을 언급했습니다. 우리는 그것을 원을 그리는 데 사용합니다.
ctx.arc (300+25,100+20,20,0, Math.pi*2);
ctx.stroke ()
ctx.fill ();
이 아크는 rect와 동일하며 경로가 그려지고 충전 또는 스트로크를 나중에 완성해야합니다.
그러나 원의 위치 판단은 사각형의 위치 판단과 다르다는 점에 유의해야합니다. 사각형의 왼쪽 상단 모서리를 시작점으로 결정하지만 일반적으로 원의 중심과의 원의 위치를 결정합니다.
수평 및 수직으로 중앙에있는 직사각형과 원형을 그리려면 사각형의 시작점을 원의 시작점으로 간주해서는 안된다는 것을 기억해야합니다. 원의 시작점은 원의 중심입니다!
잊어 버리십시오. 이제 공식, 원의 중심의 좌표, 원형의 좌표 + 사각형의 너비와 높이의 절반의 좌표를 정렬하고 정렬 할 수 있습니다.
즉, 원 x = 사각형 x + 사각형 너비/2, 원 y = 사각형 y + 사각형 높이/2의 중심입니다. 이런 식으로 그들은 절대적으로 정렬됩니다.
Arc는 직접 원을 그리는 방법만큼 사용하기 쉽지는 않지만, 직접 원을 그리는 원형을 직접 그리는 방법은 3 개의 매개 변수, 즉 원의 중심 좌표, 즉 반경, 즉 반경을 필요로하지만 Arc는 반드시를 그릴 수있을뿐만 아니라 더 강력하고 사용할 수 있습니다.
원이 있기 때문에 타원이 있어야하지만 타원은 물론 캔버스에 원을 그리는 규칙적인 기능조차 없습니다. 따라서 타원을 그리는 것은 다른 방법을 사용하여 시뮬레이션해야합니다. 이것은 매우 복잡하기 때문에 다음 단계로 맡길 것입니다.