將定義像素的圖像渲染爲正方形HTML5畫布？

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的pizel尺寸上完美呈現。

但是當你試圖擴展UP這個形象，你有更多的像素可用來填補，但少信息有關如何，以填補他們。所以你訴諸數學算法，通常稱爲插值。

畫布將自動內插像素以使用最近的像素信息填充間隙。

爲了獲得期望的單像素效果，您需要按比例放大而不用的任何插值。要做到這一點，你可以參考這answer，或者現在找到幾個答案，你知道恰當的術語來準確描述你的問題。

這CSS3解決方案應該在Chrome 41+工作現在：

canvas { 
    image-rendering: pixelated; 
}