HTML5 Canvas 位图

Question

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

这些图像可能是 16 或 32 PX 的正方形，但我希望能够将图像缩放到我喜欢的大小，只是没有任何 blur/distortion。

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

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

Answer 1

试试 "Inkscape"，它是免费的

https://inkscape.org/en/

它使用 SVG 格式（标量矢量图形），因此您可以随意缩放图像，无需任何 blur/distortion。

Answer 2

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

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

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

您可以根据需要编写使用内存 html5 canvas 到 "resize-by-multiplying" 原始图像的函数。这将使用 canvas 的能力，使用 context.getImageData 和 context.putImageData.

设置每个像素的 RGBA 值

Answer 3

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

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

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

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

Answer 4

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

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

The image [drawn by drawImage() method] must be rendered using nearest-neighbor interpolation.

该算法与@markE在中提出的算法相同。

不幸的是，浏览器仍然为这个属性使用供应商前缀，并且它没有在 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 
img.src="http://i.stack.imgur.com/3Sp5x.png"

canvas{border:.5px solid}

<img/>
<canvas></canvas>

^{滚动查看 canvas}

中调整大小后的图像

HTML5 Canvas 位图

HTML5 Canvas bitmaps

javascript

html

graphics

html5-canvas

vector-graphics