javascript - Canvas 中的最近邻渲染

Question

我有一个使用 Sprite 表制作动画的 Sprite 。他只有 16x16，但我想把他放大到 64x64 左右，因为它的所有像素 y 优点!

结果很糟糕，当然浏览器是抗锯齿的。 :/

谢谢!

编辑: 不需要 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 值用于 image-rendering，(目前)是最近邻居放大的实现。它可以应用于图像和 Canvas 。

这是一个如何进行的示例。

.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 Canvas 空间和小图像放大到 128x128。

更新 最初的回答是 Webkit 浏览器支持这个；事实上，截至 2011 年 12 月 24 日，它适用于 Mac OS 上的 Safari 和 Mac OS 上的 Chrome，但不适用于 Windows 上的 Chrome(Windows 上的 Safari 未经过验证)，如 Issue 106662 of the Chromium bug tracker 所述.从词法上讲，Windows 上的 Chrome 会接受 CSS 样式表中的 -webkit-optimize-contrast 值，但它不会有任何效果。我希望它有一天会奏效，并且这种方法将是获得最近邻放大的正确方法，但就目前而言，使用这种方法意味着 Windows Chrome 用户将不得不忍受这种模糊。