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);
}

此处（codepen）查看它是否正常工作

Answer 1

万一有人再次偶然发现这个问题（像我一样），Webkit 支持 image-rendering 的 -webkit-optimize-contrast 值，该值（当前）是最近邻升级。它可以应用于图像和画布。

这是一个例子来说明它是如何进行的。

.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">

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

更新 答案最初指出 Webkit 浏览器支持此功能；事实上，截至 2011 年 12 月 24 日，它适用于 Mac OS 上的 Safari 和 Mac OS 上的 Chrome，但不适用于 Windows 上的 Chrome（Windows 上的 Safari 尚未验证），如 Chromium 错误跟踪器的问题 106662。从词法上来说，Windows 上的 Chrome 将接受 CSS 样式表中的 -webkit-optimize-contrast 值，但不会产生任何效果。我期望有一天它会起作用，并且这种方法将是获得最近邻居升级的正确方法，但目前，使用这种方法意味着 Windows Chrome 用户将不得不忍受模糊。

Answer 2

在 Firefox 中，你可以使用这个：

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

但据我所知，对于所有其他浏览器，你几乎不走运。解决这个问题的一种方法可能是在 Photoshop（或其他）中将精灵放大到 64x64，然后在画布中使用缩小的尺寸。这样至少图像在“放大”时不会变得模糊。但它仍然不会完全给你纯粹的模式7，就像最近邻居的优点一样。

您可以使用 imageData 对象编写自己的缩放代码。这样做会导致显着的性能损失，但对于 16x16 图像，可能不会那么严重。