渲染图像为定义的像素正方形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 此图片时，您可以填充更多像素，但需要更少信息 来填充它们。所以你求助于数学算法，通常称为插值。

Canvas将使用最近的像素信息自动插值像素以填充间隙。

要获得具有单个像素的所需效果，您需要在不使用任何插值的情况下放大。要执行此操作，您可以参考此answer，或者在您知道用于准确描述问题的适当术语的情况下找到几个答案。

这个CSS3解决方案目前应该适用于Chrome 41+：

canvas {
    image-rendering: pixelated;
}