색상이 바뀌면 캔버스 모양의 가장자리가 들쭉날쭉합니다.

Question

캔버스의 fillStyle을 변경하면 부드러운 대각선이 들쭉날쭉 해져서 그 이유를 알 수없는 문제가 있습니다. 나는 그래서 당신은 더 쉽게 캔버스와 들쭉날쭉 한 가장자리를 볼 수있는 검은 색으로 배경색을 설정 한 http://jsbin.com/fadeyiva/1/edit

:

난 당신이 여기에 효과를 볼 수있는 JSBin을 만들었습니다. 회색 모양은 캔버스입니다. 페이지의 맨 아래로 스크롤 한 다음 백업하면 중간 지점을 트리거하고 캔버스 색상을 주황색으로 변경해야합니다.

그러나 하단 대각선을 보면 회색 일 때 부드럽게 시작하지만 색상이 바뀌면 가장자리가 매우 들쭉날쭉 해집니다. 필자는 왜 코드가 fillStyle 만 변경하고 캔버스의 모양을 전혀 변경하지 않기 때문에 이것이 발생하는지 알지 못합니다.

Answer 1

왜냐하면 왜곡 된 상자가 원래 디더링과 관련하여 캔버스에서 그려지기 때문입니다 (이것은 기본적으로 처리됩니다). 채우기 변경을 그대로 적용하면 디더링 아이디어를 버리고 단순히 객체의 모든 픽셀을 같은 색상으로 만듭니다. 오브젝트의 가장자리는 배경과 혼합되어야합니다 (디더링의 의미).

개체의 채우기 값을 조정하는 대신 window.onload() 함수에서 수행 한 것처럼 개체 전체를 다시 그리는 것이 좋습니다. 다시 그리기를 호출하기 때문에 브라우저는 객체에서 디더링을 강제 실행하고 새 색상으로 조정합니다.