이전 기사 Canvas 라인 드로잉 자습서를 계속하십시오
마지막으로 우리는 캔버스가 때때로 아래 그림과 같이 흐릿하고 더 넓은 1 개의 픽셀 라인을 가지고 있다고 언급했습니다.
그러한 라인은 분명히 우리가 원하는 것이 아닙니다.
이 기사의 목적은 원리를 파악하고 해결하는 것입니다.
화면에서 가장 작은 디스플레이 크기는 1 픽셀이라는 것을 모두 알고 있습니다. 1 픽셀 미만의 물건은 표시되지 않을 수 있지만 컴퓨터는 신경 쓰지 않으며 그로 끌려 갈 것입니다.
실제로 픽셀은 결국 장치입니다. 각 픽셀을 명확하게 볼 수있는 충분한 크기로 캔버스를 확대하면 어떻게됩니까? 아마도 다음과 같습니다.
그림과 같이 각 픽셀에는 시작 및 엔드 범위가 있습니다. 그림과 같이 범위는 왼쪽에서 시작하고 1 픽셀에 걸쳐 오른쪽을 중지합니다.
1 픽셀 라인을 그릴 때 픽셀의 시작 및 끝 범위를 따라 가면 매우 표준 얇은 라인을 확실히 얻을 것입니다. 다음과 같이 :
그러나 불행히도 캔버스 선은 다르게 그려집니다. 이전 기사에서, 우리는 이미 각 캔버스 라인에 무한히 얇은 중간 선이 있으며 선의 너비는 중간 선에서 양쪽으로 확장된다고 말했습니다. 우리가 여전히 두 번째 픽셀 지점에서 선을 그린다면, 라인의 중간 선이 두 번째 픽셀의 출발점에 가까워지고 그림을 그리기 시작하면 문제가 발생합니다. 캔버스 라인은 한쪽이 아닌 중간 선으로 양쪽으로 확장됩니다 (예 : 오른쪽으로 만 확장되면 더 이상 문제가 아닙니다). 확장 후, 우리의 라인은 실제로 다음과 같습니다.
현재 또 다른 문제가 있습니다. 컴퓨터는 1px 미만의 그래픽을 허용하지 않으므로 타협을했습니다. 두 픽셀을 그리십시오.
따라서 이러한 방식으로 원래 1px 라인은 폭 2px의 라인이됩니다.
실패의 이유가 발견됩니다. 캔버스의 선은 픽셀의 중간 지점이 아닌 픽셀의 시작점과 중간 선을 정렬합니다.
그렇다면이 고통스러운 문제를 어떻게 해결합니까? 어쩌면 어떤 사람들은 이미 생각했을 수도 있습니다. 두 개의 출발점이 다르기 때문에 출발점을 동일하게 만들어 봅시다!
선의 중간선을 픽셀의 중간 지점과 정렬하면됩니다!
픽셀의 중간 지점은 쉽게 찾을 수 있습니다. 예를 들어, 두 번째 픽셀의 중간 점은 그림에 대한 설명에 따라 1.5 픽셀의 위치이므로 x 픽셀의 중간 점은 (x-0.5) px입니다.
물론 덜 엄격한 경우에는 x+0.5를 사용할 수 있습니다.
이제 캔버스에 대한 결과를 시도해 봅시다.
Ctx.Moveto (100.5,100.5);
Ctx.Lineto (200.5,100.5);
Ctx.Lineto (200.5,200.5);
Ctx.Lineto (100.5,200.5);
Ctx.Lineto (100.5,100.5);
ctx.closepath ();
ctx.linewidth = 1;
ctx.strokestyle = 'RGBA (255,0,0,0.5)';
ctx.stroke ();
맞아요?
그러나 우리가 선을 그릴 때 우리는 매우 혼란스러워 보입니다. 우리는 항상이 우울한 0.5를 추가합니까? 물론 변수를 사용하여 대부분의 시간을 절약하기 때문에 각 값에 0.5를 추가 할 필요가 없습니다.
또한, linewidth> 1을 가진 줄의 경우, 우리는 그것에 대해 걱정할 필요가 없습니다.이 문제는 라인의 폭이 1px 일 때 가장 분명하기 때문에이 문제는 가장 분명하기 때문입니다.