将定义像素的图像渲染为正方形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; 
}