html5 캔버스 그리기 튜토리얼(3) - canvas_html5 튜토리얼 스킬에서 1픽셀 선이 흐려지는 이유

이전 글에 이어 캔버스 선 그리기 튜토리얼
지난번에 언급했듯이 캔버스에는 아래와 같이 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.closePath();
ctx.lineWidth = 1;
ctx.StrokeStyle = 'rgba(255,0,0,0.5)'
ctx.Stroke(); >

맞나요?

그런데 선을 그릴 때마다 이 우울한 0.5를 더해야 할까요? 물론 그렇지 않습니다. 대부분의 경우 값을 저장하기 위해 변수를 사용하기 때문에 각 값에 0.5를 더할 필요가 없습니다.
게다가 lineWidth>1인 줄의 경우 걱정할 필요가 없습니다. 선 너비가 1px인 경우에만 이 문제가 가장 명백합니다.