선을 그리는 방법은 무엇입니까? 실제 그리는 것과 거의 같습니다.
1. 브러시를 그림의 시작 부분으로 이동합니다.
2. 첫 번째 획의 중지 지점을 결정합니다.
3. 계획한 후 브러시를 선택합니다. 두께, 색상 등)
도면 확인
캔버스는 상태 그리기를 기반으로 하기 때문에(매우 중요합니다. 나중에 설명하겠습니다) 처음 몇 단계는 상태를 결정하는 것이고 마지막 단계는 특정 그림을 그리는 것입니다.
1. 브러시 이동(moveTo())
이전에 브러시 컨텍스트를 얻었으므로 수정된 메서드인 context.moveTo(100,100)를 사용하는 예를 들어 보겠습니다. 이 코드의 의미는 브러시를 (100,100) 지점(단위는 px)으로 이동시키는 것입니다. 기억하세요, 캔버스의 왼쪽 상단은 데카르트 좌표계의 원점이며, y축의 양의 방향은 아래쪽, x축의 양의 방향은 오른쪽입니다.
2. 스트로크 중지 지점(lineTo())
마찬가지로 context.lineTo(600,600)입니다. 이 문장은 이전 스트로크의 중단점에서 (600,600)까지 그린다는 의미입니다. 하지만 여기서의 moveTo() 및 lineTo()는 단지 상태일 뿐이며, 계획 중이고, 그릴 준비를 하고 있으며, 아직 그리기를 시작하지 않았으며 단지 계획일 뿐입니다!
3. 브러시를 선택하세요
여기서는 브러시의 색상과 굵기만 설정합니다.
context.lineWidth = 5, 이 문장은 브러시(선)의 굵기를 10px로 설정하라는 의미입니다.
context.StrokeStyle = "#AA394C", 이 문장은 브러시(선)의 색상을 장미색으로 설정한다는 의미입니다.
캔버스는 상태 기반 그리기이므로 브러시 두께와 색상을 선택하면 실제로 선 두께와 색상도 선택됩니다.
4. 그리기 확인
그리기를 확인하는 방법은 fill()과 획() 두 가지뿐입니다. 그리기에 대한 기본 지식이 있는 사람은 전자가 채우기를 나타내고 후자는 획을 의미한다는 것을 알아야 합니다. 우리는 단지 선을 그리는 것이므로 선을 그어주세요. 그냥 context.Stroke() 코드를 호출하면 됩니다.
선을 그어보세요
그냥 선분 아닌가요! 말도 안되는 소리가 너무 많아요! 그럼 그림을 시작해 보겠습니다.
