캔버스 픽셀 출혈/정확도 문제

타일 데이터를 캔버스로 그릴 때 반올림 오류로 보이는 점에 착안하여 최소한의 재현 가능한 예제로 그 점을 설명합니다. 기본적으로 draw 호출은 그림에서 그리드 인 (0, 0, 32, 32) 소스 사각형을 사용합니다. 그러나 파이어 폭스는 소스 사각형을 따라 샘플링하여 더 많은 것을 얻는다.캔버스 픽셀 출혈/정확도 문제

최고 섹션은 파이어 폭스, 하단 부분은 구글 크롬 Top is Firefox, bottom is Chrome

아이디어인가?

출처

2015-01-27 Casper Beyer

jsfiddle에서 실행되는 축소 된 테스트 케이스를 만들려고합니까? – the8472

픽셀 그래픽 당신은 아마 당신이해야 smoothing
false에 설정하려는 당신이
하는 캔버스를 표시하지 않는 경우 캔버스의 방법 중 하나에 정수가 아닌 값을 전달하지 있는지 요소를 기본 크기 (즉, CSS 크기 조정)로 설정하면 CSS 속성 image-rendering을 crisp-edges으로 설정하려고합니다.

출처

2015-01-27 18:02:45 the8472

-'imageSmoothingEnabled'가 false로 설정되면 모든 접두어 버전이 적용됩니다. 모든 것이 정수 값으로 고정되고 창 크기에 대한 캔버스가 1 : 1로 매핑됩니다. –

그래서 나는 지금 당장 절대적으로 난처한 상황에 처해 있습니다. –

캔버스 픽셀 출혈/정확도 문제

답변

관련 문제