Canvas中的最近邻渲染

Question

我有一个使用精灵表动画的精灵。他只有16x16，但是我希望能够将它扩展到64x64左右的所有像素优点！

结果很糟糕，当然浏览器反锯齿它。 ：/

谢谢！

编辑： 不需要css，这是我的绘图功能。

function drawSprite(offsetx:number,offsety:number,posx:number,posy:number){
    ctx.drawImage(img, offsetx*32, offsety*32, 32, 16, posx*32, posy*8, 128, 32);
}

看到它有点工作here (codepen)

Answer 1

如果有人再遇到这种情况（像我一样），Webkit支持-webkit-optimize-contrast的{​​{1}}值，其中（当前）是最近邻扩频的实现。它可以应用于图像和画布。

这是一个如何运作的例子。

image-rendering

使用此设置， Webkit Safari和Gecko / Firefox都会将16x16画布空间和小图像放大到128x128，并使用最近邻算法。

更新答案最初表明 Webkit 浏览器支持此功能;事实上，截至2011-12-24，它适用于Mac OS上的Safari和Mac OS上的Chrome，但不适用于Chrome的Windows（Windows上的Safari未经过验证），如Issue 106662 of the Chromium bug tracker所述。从词汇上讲，Windows上的Chrome将接受CSS样式表中的.nn128 { width: 128px; height: 128px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; } <canvas class="nn128" width="16" height="16"></canvas> <img src="path/to/small/image.png" alt="Small image" class="nn128"> 值，但不会产生任何影响。我希望它能在某一天工作，这种方法将是获得最近邻居升级的正确方法，但是现在，使用这种方法意味着Windows Chrome用户将不得不忍受模糊。

Answer 2

在Firefox中，您可以使用：

canvas {
  image-rendering: -moz-crisp-edges;
}

但就我所知道的其他浏览器而言，你几乎没有运气。解决这个问题的一种方法可能是在Photoshop（或其他）中将精灵放大到64x64，然后在画布中缩小它。这样，当“放大”时，至少图像不会变得模糊。它仍然不会完全给你纯粹的mode7，就像最近邻居的善良一样。

您可以使用imageData对象编写自己的缩放代码。这样做会对性能造成重大影响，但对于16x16图像，它可能不会那么重要。