캔버스가 아직 무엇인지 모르면 이전 기사를 확인할 수 있습니다.
그리는 법을 배울 때 선이 가장 기본적이며 선의 연결은 모든 모양을 형성 할 수 있습니다. 캔버스에서도 마찬가지입니다.
시작하기 전에 캔버스와 브러시를 꺼냅니다.
var cvs = document.getElementById ( 'cvs'); //캔버스
var ctx = cvs.getContext ( '2d'); // 브러시
우리가 그리면 펜 포인트가 고정되지 않으며 언제든지 변경됩니다. 캔버스가 손을 통해 쓰기 지점을 결정하지는 않지만 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,100);
Ctx.Lineto (200,200);
Ctx.Lineto (100,200);
Ctx.Lineto (100,100);
ctx.stroke ();
여기서 우리는 먼저 모든 경로를 그린 다음 차례로 쓰레기를 쓰십시오.
- 저자의 불만 : 캔버스 그림에 대한 나쁜 점 중 하나는 기본적으로 추측에 의존하고 직관적이지 않다는 것입니다.
심각한 팁 : 캔버스 (즉, 채우기 및 뇌졸중)의 드로잉 프로세스는 매우 자원이 많이 소요됩니다. 시스템 리소스를 절약하고 효율성을 향상 시키려면 모든 경로를 끌어 당기고 그림을 한 번에 채우거나 치는 것이 가장 좋습니다.
위 그림에서 기본 선 두께는 1px이고 선 색상은 검은 색임을 알 수 있습니다. 물론 우리는 그것들을 설정할 수 있지만 이상한 것은 선 너비가 선폭이고 선 스타일을 스트로크 스타일이라고한다는 것입니다. 왜 라인 스타일이 아닌가? 나도 모르겠어요. :
ctx.linewidth = 10;
ctx.strokestyle = 'RGBA (255,0,0,0.5)';
위의 코드는 선 너비를 10px로 설정하고 선 색상은 반투명 한 빨간색이됩니다.
그림 1에서 볼 수 있듯이 새로 고쳐서 뭔가 잘못된 것 같습니다! 왼쪽 상단에 작은 조각이 누락 된 것처럼 보이는 이유는 무엇입니까? 이것은 환상이 아닙니다. 그 이유는 캔버스 라인 드로잉 방식으로 시작됩니다.
질문 : 내가 그리는 사각형의 경로가 너비와 높이가 100이고 가장자리 선 너비는 10px라면 가장자리가 그려진이 사각형의 전체 너비와 높이는 얼마입니까? 100+10*2 = 120입니까?
가장자리가 경로 밖에 완전히 그려져 있다면 120이지만 캔버스는 그렇지 않습니다. 캔버스의 라인은 중간 선이 있으며, 이는 선의 절대 중간에 위치하고 선의 스트로크는 중간 선으로 양쪽으로 확장됩니다. 예를 들어, 선 너비가 1 인 경우 중심선은 0.5입니다. 너비가 5 인 경우 중심선은 2.5입니다. 캔버스 그림이 쓰다듬 으면 경로는 선의 중간 선에 맞고 스트로크에 맞습니다. 그림 2와 같이 :
따라서, 스트로크되면, 선의 절반은 외부에 있고 절반은 내부에 있으며, 즉 상위 사각형의 전체 너비는 100+(10/2)*2이며 이는 110입니다.
이러한 이유로 왼쪽 상단에 누락 된 코너가있는 것이 당연합니다. 아무도 여기에 페인트 칠을하지 않았기 때문입니다.
그러나 왜 나머지 구석에 간격이 없습니까? 당신의 사진을 봐, 네 구석에 틈이 없습니까?
그것은 선을 그리는 동안 브러시를 들어 올리지 않았고 브러시는 연속적 이었기 때문입니다. 당신이 그것을 믿지 않는다면, 지금 Moveto :
Ctx.Moveto (100,100);
Ctx.Lineto (200,100);
Ctx.Moveto (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의 좌표는 변경되지 않았으며 여전히 같은 점이지만, 새로 고침 후에는 그림 3]이됩니다 [그림 3].
이해했다? 우리는 펜을 들었 기 때문에.
이제 Moveto를 삭제하고 걱정하지 마십시오. 왼쪽 상단 코너에서 누락 된 코너를 채우는 방법에 대해 생각해 봅시다.
먼저, 질문을하겠습니다. 우리의 길은 폐쇄 되었습니까? 이건 말도 안돼? 우리는 아직 길을 기원으로 돌려 놓지 않았습니까? 물론 폐쇄되었습니다!
잘못된! 이것은 단지 경로의 마지막 지점을 시작점과 겹치지 만 경로 자체는 닫히지 않습니다!
캔버스의 경로를 닫는 방법? ClosePath ()를 사용하십시오.
Ctx.Moveto (100,100);
Ctx.Lineto (200,100);
Ctx.Lineto (200,200);
Ctx.Lineto (100,200);
Ctx.Lineto (100,100);
ctx.closepath (); // 닫기 경로
ctx.linewidth = 10;
ctx.strokestyle = 'RGBA (255,0,0,0.5)';
ctx.stroke ();
이 시점에서 상쾌하게하면 완벽한 사각형이됩니다. Figure 4:
우리가 아무리 두껍게 선을 바꾸더라도 - 더 두껍을수록 사람들이 더 많을수록 더 두껍습니다. -이 정사각형의 네 모서리는 일반 직각이며 매끄럽지 않습니다. 부드러운 코너의 경우는 무엇입니까? PS, 그림 5의 제곱 스트로크를 참조하십시오.
나는 그것을 보았다. 가장자리가 두꺼울수록 그의 각도의 호는 더 큽니다.
캔버스의 가장자리 선이 PS의 가장자리와 동일하다고 생각한다면 어떤 방법이 있습니까? 물론 Linejoin 속성이 있습니다.
라인의 교차점을 의미하는 LineJoin은 그림 6과 같이 3 가지 속성을 가지고 있습니다.
우리의 사각형이 날카로운 모서리를 사용한다는 것을 이해할 수 있다는 것은 의심의 여지가 없으므로 둥근 모서리로 바꾸십시오.
그래픽은 이와 같이되었습니다. 그림 7 :
PS와 비슷합니다.
또한, 이전 그림에서 우리는 캔버스 라인의 두 끝이 평평하다는 것을 알았으며 변경할 수 있습니까? 결국, 그것은 잘 보이지 않습니다.
또한 선을 정의하는 엔드 포인트 인 Linecap 속성도 가능합니다. Linecap에는 3 개의 값이 있습니다 : Butt (Flat, Default), Round (원), Square (Square), 그림 8과 같이.
평평한 머리는 실제로 정사각형 헤드와 동일하다는 것을 알 수 있습니다. 유일한 차이점은 평평한 머리가 뻗어 있지 않다는 것입니다. 둥근 머리와 정사각형 머리는 조각으로 뻗어 있습니다. 이 섹션은 얼마나 걸립니까? 그것은 라인 너비의 절반입니다.
당신은 무엇을 생각해 본 적이 있습니까? 하하, 이전의 폐쇄 경로 문제는 Linecap을 정사각형 헤더로 설정하면 효과가 동일합니다!
그러나 안전한 편이 되려면 여전히 길을 닫아야합니다. 기억하십시오!
나는 또한 당신에게 상기시키고 싶습니다 : 닫힌 경로에는 끝 점이 없습니다! 따라서 종말점의 스타일은 닫힌 경로에서 보이지 않습니다.
또한 Linecap은 LineJoin과 약간 비슷합니다. 엉망이되지 않도록주의하십시오.당신이 날카 로워지고 불운이 있다면, 때로는 1 픽셀의 선이 1 픽셀 너비가 아니라 더 넓고 흐릿한 것처럼 보일 수 있습니다. 그림 9와 같이 :
축하해요! 버그가 아닌 버그가 발생했습니다. 이것은 매우 특별합니다. 다음 기사에 그를 넣을 게요