HTML5 画布位图

Question

我正在构建一个使用像素化图像的复古风格游戏。我还没有创建这些图像，因为我想知道做事的最佳方式。

这些图像可能是 16 或 32 PX 的正方形，但我希望能够将图像缩放到我喜欢的大小，而不会出现任何模糊/失真。

我应该使用什么格式？以及我应该如何将它们导入我的画布。也一样？

EDIT#1： 修正了错字并将 Q 放回主题。 （感谢 Spence 指出）

Answer 1

试试“Inkscape”，它是免费的

https://inkscape.org/en/

它使用 SVG 格式（标量矢量图形），因此您可以随意缩放图像，而不会出现任何模糊/失真。

Answer 2

在没有任何模糊或失真的情况下放大的唯一方法是将每个 1 像素变成一组 2x2、3x3、... 像素。

例如，图像左上角的单个蓝色像素将变成一组位于 [0,0]、[1,0]、[0,1] 和 [1,1] 的 4 个蓝色像素.对于原始图像上的每个其他像素也是如此。生成的图像将是原始图像宽度和高度的两倍。

由于您的图形样式是像素化图像，因此此调整将保留您的像素化同时也放大原始图像。

您可以编写一个函数，该函数使用内存中的 html5 画布根据需要“调整大小乘以”原始图像。这将使用画布的能力来使用context.getImageData 和context.putImageData 设置每个像素的RGBA 值。

Answer 3

创建应用 16x16 或 32x32 平铺效果的大图标图像。然后，当您将它们写入画布时（当然是在加载图像之后）使用

将它们缩小到您想要的大小

context.drawImage(img,x,y,width,height);

文件大小不太可能大幅增加，因为每个图块都应该很容易压缩。

Answer 4

CanvasContext2d 确实有一个禁用图像平滑的选项：imageSmoothingEnabled 默认设置为 true。

根据the specs，如果设置为false，

图像[由drawImage()方法绘制]必须使用 nearest-neighbor interpolation。

此算法与@markE 在his answer 中提出的算法相同。

不幸的是，浏览器仍然使用 vendor-prefix 作为该属性，并且在 IE9 和 IE10 中都没有实现...

var img = document.querySelector('img'),
    canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');

// draw the image
img.onload = function(){
  canvas.width = img.width*50;
  canvas.height = img.height*50;
  // disable smoothing after we change canvas' width/height
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;
  ctx.msImageSmoothingEnabled = false;
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(img, 0,0, canvas.width, canvas.height);
  }
//32x32px image taken from https://stackoverflow.com/q/31910043/3702797
img.src="http://i.stack.imgur.com/3Sp5x.png"

canvas{border:.5px solid}

<img/>
<canvas></canvas>

^{滚动查看画布中调整大小的图像}