10

我有一个使用精灵表动画的精灵。他只有 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);
}

在这里看到它有点工作（codepen）

4

2 回答 2

9

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

这是一个例子。

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

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

更新答案最初表明Webkit浏览器支持这一点；事实上，截至 2011 年 12 月 24 日，它与 Mac OS 上的 Safari 和 Mac OS 上的 Chrome 一起工作，但不适用于 Chrome one Windows（Windows 上的 Safari 未经验证），如Chromium bug tracker 的 Issue 106662 中所述。从词法上讲，Windows 上的 Chrome 将接受-webkit-optimize-contrastCSS 样式表中的值，但不会产生任何影响。我期望它有一天会起作用，并且这种方法将是获得最近邻升级的正确方法，但就目前而言，使用这种方法意味着 Windows Chrome 用户将不得不忍受模糊。

于 2011-08-24T06:21:12.733 回答
1

在 Firefox 中，您可以使用：

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

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

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

于 2010-07-22T01:51:43.090 回答