HTML5 Canvas位图

Question

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

这些图像可能是16或32平方厘米，但我希望能够将图像缩放到我喜欢的范围，只是没有任何模糊/失真。

我应该使用什么格式？我应该如何将它们导入我的画布。还有吗？

编辑＃1：修正了拼写错误＆amp;把Q放回主题。 （谢谢Spence指出来）

Answer 1

尝试＆＃34; Inkscape＆＃34;，免费

https://inkscape.org/en/

它使用SVG格式（标量矢量图形），因此您可以根据需要缩放图像，只是没有任何模糊/失真。

Answer 2

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

例如，图像左上角的单个蓝色像素将成为[0,0]，[1,0]，[0,1]和...的4个蓝色像素的集合。 [1,1]。对于原始图像上的每个其他像素也是如此。得到的图像宽度和宽度的两倍。原始图像的高度。

由于您的图形样式是像素化图像，因此这种调整可以保留像素化，同时还可以放大原始图像。

您可以根据需要对使用内存中html5画布的函数进行编码，以“按比例调整”原始图像的大小。这将使用canvas使用context.getImageData和context.putImageData为每个像素设置RGBA值的能力。