정의 된 픽셀 사각형으로 이미지 렌더링 HTML5 canvas?

Question

나는 다음과 같은 6x5 이미지가 : 그래서 캔버스에 날려 나타납니다

:

내가 그것을 렌더링이 더 많거나 적은이 코드 this.context.putImageData(this.imageData, 0, 0)를 사용하고 확장을 캔버스 (css) (canvas {width: 100%}).

그것은 다음과 같은 RGB 값이 있습니다

이

51.65 41.59 60.74 159.44 137.91 165.41 
147.29 71.01 52.93 73.80 115.80 93.45 
77.16 112.66 98.07 70.43 78.91 107.27 
107.39 122.85 60.67 103.91 144.37 124.05 
138.59 123.77 140.51 107.25 52.10 138.80 

왜 내가 정의 그리드의 블록 사각형으로 개인을 볼 수 있습니까? 이미지 렌더링 방법과 관련이 있습니까?

Answer 1

예. 이는 이미지가 렌더링되는 방법과 관련이 있습니다.

색상이있는 이미지는 일반적으로 모든 픽셀의 색상에 대한 완전한 정보를 가지고 있습니다. 따라서 100x100 이미지는 100x100 픽셀 크기로 완벽하게 렌더링됩니다. 당신이 UP이 이미지를 확장 할 때

는하지만, 당신은 더 많은 픽셀이 기입 할 수 미만이 정보에 대한 을 채우는 방법을. 그래서 당신은 보통 보간으로 알려진 수학적 알고리즘에 의지합니다.

Canvas는 가장 가까운 픽셀 정보를 사용하여 간격을 메우기 위해 픽셀을 자동으로 보간합니다.

원하는 단일 픽셀 효과를 얻으려면 의 범위를 조정해야합니다 (보간 없이는). 이렇게하려면이 answer을 참조하거나 오히려 문제를 정확하게 설명하는 데 적합한 용어를 아는 즉시 몇 가지 대답을 찾으십시오.

이 CSS3 솔루션은 지금 크롬 41+에서 작동합니다 :

canvas { 
    image-rendering: pixelated; 
}