아직 캔버스가 무엇인지 모르신다면 이전 글 을 읽어보세요. 캔버스에서도 마찬가지입니다. 시작하기 전에 캔버스와 브러시를 꺼냅니다.
var cvs = document.getElementById('cvs'); // 캔버스
var ctx = cvs.getContext('2d'); // 브러시
그려보자 글을 쓸 때 시작점은 정해져 있지 않고 언제든지 바뀔 수 있습니다. Canvas에서는 필기점을 직접 결정하지 않지만 moveTo라는 메소드가 있습니다. moveTo의 기능은 펜촉을 캔버스에서 들어 올려 지정된 지점(예: 좌표)으로 이동하는 것과 같습니다.
ctx.moveTo(x, y)
이 과정에서는 그래픽이 그려지지 않습니다. 이는 캔버스에 펜을 매달아 놓은 것과 같습니다.
하지만 여기저기 돌아다녀도 소용없어요. 그리기 시작해야 해요. 먼저 가장 간단한 것인 직선을 그려보겠습니다.
직선을 그리는 방법은 lineTo이며, 해당 매개변수는 점인 moveTo와 동일합니다.
ctx.lineTo(x,y) 물론 선을 그리면 쓰기 지점도 이동하므로 lineTo 이후에는 쓰기 지점이 대상 지점이 됩니다.
ctx.moveTo(100,100) ;
ctx.lineTo(200,100);
웹페이지를 새로고침하면 캔버스에 예상되는 줄이 전혀 없다는 것을 알 수 있습니다. 한 단계가 누락되었기 때문에 lineTo는 실제로 그 자체로 보이지 않는 "경로"입니다. 우리가 그를 보여주기를 원한다면, 우리는 그를 "그려야" 합니다.
PS를 사용해 본 학생들은 두 가지 그래픽 모드, 즉 채우기 모드와 획 모드를 확실히 알고 있을 것입니다. 이제 선을 그렸으므로 PS에서 경로를 그리는 것과 같습니다. 이때 경로의 가장자리를 그릴 수 있으며 그래픽이 표시됩니다.
캔버스 스트로크 방법은 스트로크()입니다. 이제 코드를 완성해 보겠습니다.
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.Stroke(); 당신은 선을 볼 수 있습니다. 물론 수백 개의 경로를 연속으로 그린 다음 스트로크 동작을 수행하여 수백 개의 선을 한 번에 그릴 수도 있습니다. 이제 4개의 선으로 직사각형을 그려보겠습니다.
ctx.moveTo(100,100);
ctx.lineTo(200,200)
ctx.lineTo(100,100); ;
ctx.Stroke();
여기에서는 먼저 전체 경로를 그린 다음 한 번에 스트로크합니다.
——–작가의 불만: 캔버스 그리기의 한 가지 단점은 기본적으로 추측에 기반을 두고 있다는 점이며, 이는 매우 직관적이지 않습니다.
중요한 알림: 캔버스 그리기 프로세스(예: 채우기 및 스트로크)는 리소스를 많이 소모합니다. 시스템 리소스를 절약하고 효율성을 높이려면 모든 경로를 그린 다음 그래픽을 한 번에 채우거나 스트로크하는 것이 가장 좋습니다.
위 그래픽을 보면 기본 선 굵기가 1px이고 선 색상이 검은색임을 알 수 있습니다. 물론 설정할 수 있지만 이상한 점은 선 너비를 설정하는 것이 lineWidth인데 선 스타일을 설정하는 것을 스트로크 스타일이라고 한다는 것입니다. 나도 모른다. :
코드 복사
위 코드는 선 너비를 10px로 설정하고 선 색상을 반투명 빨간색으로 설정합니다.
그림 1과 같이 새로 고치면 뭔가 잘못된 것 같습니다! 왼쪽 상단 모서리에 작은 조각이 누락된 이유는 무엇입니까? 이것은 환상이 아닙니다. 그 이유는 캔버스의 선 그리기 방식에서 시작된다.
질문: 내가 그리는 직사각형 경로의 너비와 높이가 100이고 옆선 너비가 10픽셀인 경우 측면을 그린 직사각형의 전체 너비와 높이는 얼마입니까? 100 10*2=120인가요?
가장자리가 경로 바깥쪽으로 완전히 그려지면 120이 됩니다. 하지만 캔버스는 그렇지 않습니다. 캔버스의 모든 선에는 선의 절대 중앙에 위치한 "중간선"이 있습니다. 선의 획은 중심선에서 양쪽으로 확장됩니다. 예를 들어, 선 너비가 1이면 중심선은 0.5이고, 너비가 5이면 중심선은 2.5입니다. 캔버스 그래픽을 스트로크하면 경로가 선의 중심선에 정렬된 다음 스트로크됩니다. 그림 2와 같이:
따라서 따라하면 선의 절반은 바깥쪽에 있고 절반은 안쪽에 있습니다. 즉, 위 직사각형의 전체 너비는 100(10/2)*2, 즉 110입니다.
이 때문에 왼쪽 상단 모서리 부분이 깨져 보이는 것은 자연스러운 현상입니다. 여기에는 아무도 그림을 그리지 않으니까요.
근데 왜 나머지 모서리에는 노치가 없나요? 사진 네 귀퉁이에 틈이 있는 것 같지 않나요?
선을 그릴 때 브러시를 '들어 올리지' 않았기 때문입니다. 즉, 브러시가 연속적으로 움직이지 않았기 때문입니다. 믿을 수 없다면 지금 이동하자:
ctx.moveTo(100,100);
ctx.lineTo(200,100); //여기에 주목하세요
ctx.lineTo(200,200); 🎜>ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.lineWidth = 10;
ctx.StrokeStyle = 'rgba(255,0,0,0.5)'; >ctx.Stroke();
두 번째 선을 그리기 전에 moveTo를 옮겼는데, moveTo의 좌표는 변함이 없었는데, 새로고침을 하고 나니 그래프가 이렇게 됐네요. 사진3] :
알았나요? 우리가 펜을 들었기 때문이다. 
이제 moveTo를 삭제하고 왼쪽 상단의 부족한 모서리를 어떻게 채울지 고민해 볼까요?
먼저 질문 하나 하겠습니다. 우리의 길이 막힌 걸까요? 이건 말도 안 되는 소리가 아닌가? 우리는 이미 원점으로 돌아가는 길을 돌았지 않은가? 물론 닫혀 있어요!
틀렸어요! 이렇게 하면 경로의 마지막 지점이 시작 지점과 일치하게 되지만 경로 자체는 닫히지 않습니다!
Canvas에서 경로를 닫는 방법은 무엇입니까? closePath()를 사용하세요.
ctx.lineTo(200,200)
ctx.lineTo(100,100); ctx.closePath( );//닫힌 경로
ctx.lineWidth = 10;
ctx.StrokeStyle = 'rgba(255,0,0,0.5)'
ctx.Stroke(); >
이때 새로고침하면 완벽한 정사각형이 됩니다. 그림 4:
아무리 선을 굵게 만들어도 선이 두꺼울수록 좋아해주시는 분들이 많겠죠? ————이 사각형의 네 모퉁이는 직각이며 둥글지 않습니다. 둥근 모서리는 어떻습니까? PS의 사각형 획을 살펴보십시오. 그림 5:
보시다시피 가장자리가 두꺼울수록 모서리의 호가 더 커집니다.
Canvas의 가장자리를 PS의 가장자리와 동일하게 하려면 어떤 방법이 있나요? 물론 lineJoin 속성입니다.
선의 교차를 의미하는 lineJoin에는 그림 6과 같이 miter(기본값, 날카로운 모서리), bevel(베벨), round(둥근 모서리)의 세 가지 속성이 있습니다.
거기 직사각형의 모서리가 뾰족하다는 것을 즉시 이해할 수 있으므로 둥근 모서리로 변경해 보십시오.
그래픽은 다음과 같습니다. 그림 7:
PS와 약간 비슷합니다. , 오른쪽?
게다가 이전 사진을 보면 캔버스 선의 끝부분이 플랫한 것으로 알고 있는데, 이를 변경할 수 있나요? 결국 그것은 평평하고 좋아 보이지 않습니다.
도 가능합니다. 즉, 선의 끝점을 정의하는 lineCap 속성입니다. lineCap에는 그림 8과 같이 butt(플랫, 기본값), round(원), square(사각형)의 3가지 값이 있습니다.
실제로는 플랫 헤드인 것을 사진을 보면 알 수 있습니다. 그리고 스퀘어 헤드도 똑같습니다. 플랫 헤드가 별로 튀어나오지 않는다는 점만 다릅니다. 둥근 머리와 사각형 머리 모두 한동안 튀어나올 것입니다. 그것은 선 너비의 절반입니다.
생각해 본 적 있으신가요? 하하, 이전 닫힌 경로 문제의 경우 lineCap을 정사각형 머리로 설정하면 효과는 동일합니다!
하지만 안전을 위해 길을 막아야 한다는 점 기억해주세요!
또한 상기시켜 드리고 싶습니다. 닫힌 길에는 끝점이 없습니다! 따라서 닫힌 경로에서는 끝점 스타일을 볼 수 없습니다.
또한: lineCap은 lineJoin과 다소 유사하므로 혼동하지 않도록 주의하세요.
눈이 예리하고 운이 좋지 않다면 1픽셀 선이 1픽셀 너비가 아니고 더 넓고 흐릿하게 보일 수도 있습니다. 그림 9:
축하합니다. 버그가 아닌 버그가 발생했습니다. 이것은 매우 특별합니다. 다음 기사에서 이에 대해 이야기하겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
